VUE打包优化

经过2小时努力，将打包后的vendor由1.44M优化至50k。方法是打包 vender 时不打包 vue、element-ui、echarts 等，换用国内的 bootcdn 直接引入到根目录的 index.html 中。

首先在根目录引入CDN

注意要在 </body> 前引入，否则会报错。

/* ./index.html */
<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->   
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
</body>

接着配置 webpack

在 webpack 里有个 externals，可以忽略不需要打包的库。key 参考 package.json , value 是你引入的别名。

/* ./build/webpack.base.conf.js */

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ElementUI',
    'echarts': 'Echarts',
}

到这里应该就 OK 了但是我遇到了报错

element is not defined

main.js 中注释掉就好了

// import ElementUI from 'element-ui'

对比图片，优化前：

优化后：

2018-4-17 补充

今天想 vue 和 vue-router 文件不是很大，还是一起打包的好，能少两次请求，于是： index.html :

<!-- <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> -->
<!-- <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> -->
<script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>

webpack.base.conf.js :

externals: {
    // 'vue': 'Vue',
    // 'vue-router': 'VueRouter',
    'element-ui': 'ElementUI',
    'echarts': 'Echarts',
}

结果报错：

element is not defined

原因是 element 依赖 vue ，需要在 vue 之后引入，而如果在其之后引入，又会报组件未注册的错误，因此 vue 和 element 必须同时使用CDN，而且 element 需在 vue 之后引入。

2019-9-19 补充

看到有人点赞，就再补充一下，根据[官方提示] (cn.vuejs.org/v2/guide/in…)，开发环境下应该使用开发版本的 vue，否则会失去vue的所有常见错误相关的警告。

最佳实践应该就是通过环境变量来控制页面加载哪个版本的 vue 了，不熟悉的可以看环境变量和模式，具体配置分三步：

.env 中添加默认 vue 文件地址

VUE_APP_VUEJS = https://cn.vuejs.org/js/vue.js

.env.development 中添加开发环境下的 vue 文件地址

VUE_APP_VUEJS = https://cn.vuejs.org/js/vue.min.js

index.html 中引用：

<script src="<%= VUE_APP_VUEJS %>"></script>

当然你可以根据实际项目情况来决定加载哪个版本。

如果你的项目脚手架版本不是 vue-cli3，可以参照我的 vue-cli2多环境添加来添加多环境支持。不过个人觉得最佳实践还是从文件加载环境变量，也就是修改webpack配置，使用dotEnv，它可以使得Node.js从文件中加载环境变量。