vue打包优化策略

本文vue-cli是2.9.6 如果高于此版本太多，有些配置也许不太一样，还未测其他版本的

 vue的一个较大的项目往往都几MB，如下图，因为服务器性能低下和用户访问流畅度的原因我们通常会把vue打包的dist文件给优化小一点

首先下一个插件吧，这个插件就是可视化你目前打包的文件大小的布局

npm install --save-dev webpack-bundle-analyzer

然后直接打包看看

npm run build --report

应该可以看到下面这张图片，总共大小2.07MB，并且主要是element ui quils 这些占的空间较大

 那么就优化它！！！优化的原理就是把引入的这些外部包不打包到dist里，这些外部包直接用引用网上的cdn

---

法一，高版本 

如果自己的脚手架没有webpack.base之类的，就需要在vue.config.js添加如下

module.exports = {
    chainWebpack: config => {
        config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }

}

下面的externals也需要再vue.config.js中加入

    chainWebpack: config => {
        config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    },
    configureWebpack: config => {
        // 用cdn方式引入
        config.externals = {
            'vue': 'Vue',
            'vuex': 'Vuex',
            'element-ui': 'ElementUI',
            'v-charts': 'VCharts',
            'vue-quill-editor': 'VueQuillEditor',
            'echarts': 'echarts',
            'moment': 'moment',
            'store': 'store',
            'crypto': 'crypto'
        }

    },

---

法二，低版本 

首先在webpack.base.conf.js 下的module.exports里面添加externals，也就是这些包使用外部依赖

 externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'element-ui': 'ElementUI',
    'v-charts':'VCharts',
    'vue-quill-editor':'VueQuillEditor'
  },

这是我的main引入的部分包 你应该可以看懂上面的'vue':'Vue' 怎么一一对应的了
import Vue from 'vue'
import router from './router'
import VueQuillEditor from 'vue-quill-editor'
import VCharts from 'v-charts'

---

 

然后在index.html中引入这些依赖

这些依赖咋来的，传送门：Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers 

 复制链接到index.html就行，刚才这一顿操作后，你不妨再

npm run build --report

看吧，体积明显减少了不少，当然这还不够，因为我还有好多依赖没有引入cdn，这里我只是随便优化一下