Vue 项目打包之后 vendor.js 体积太大，影响首次加载速度

在 Vue 项目中，引入到工程中的全部 js、css 文件，编译时都会被打包进 vendor.js，如果引入的库众多，那么vendor.js文件体积将会至关的大，影响首开的体验。
解决方案：将引用的外部 js、css 文件剥离出来，不编译到 vendor.js 中，而是用资源的形式引用，这样浏览器可使用多个线程异步将 vendor.js、外部的 js 等加载下来，达到首次打开加速的目的。
推荐外部的库文件使用CDN资源：css

1. bootstrap CDN：https://www.bootcdn.cn
2. Staticfile CDN：https://www.staticfile.org
3. jsDelivr CDN：https://www.jsdelivr.com
4. 75 CDN：https://cdn.baomitu.com
5. UNPKG：https://unpkg.com
6. cdnjs：https://cdnjs.com

第一步：引入资源
在 index.html 中，添加CDN资源，html

<!-- 引入Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
<!-- 引入vuex.js -->
<script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.staticfile.org/element-ui/2.4.3/index.js"></script>
<!-- 引入样式 -->
<link href="https://cdn.staticfile.org/element-ui/2.4.3/theme-chalk/index.css" rel="stylesheet">
<!-- 引入echarts -->
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>

第二步：添加配置
在 bulid/webpack.base.conf.js 文件中，增长 externals，将引用的外部模块导入，以下：
vue

注意一点： 格式为 ‘aaa’ : ‘bbb’, 其中，aaa 表示要引入的资源的名字，bbb 表示该模块提供给外部引用的名字，由对应的库自定。webpack

第三步：去掉原有的引用
去掉 import：web

// import Vue from "vue";
// 引入element 组件
// import ElementUI from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";
// import VueRouter from "vue-router";
// import Vuex from "vuex";

去掉 Vue.use(xxx)：vue-router

// Vue.use(ElementUI);
// Vue.use(VueRouter);
// Vue.use(Vuex);

从新 npm run build，会看到此时 vendor.js 体积有所减少了不少。经过开发者模式的Network工具，能够看到 vue.js、vuex.js、vendor.js 等文件会分别由一个线程进行加载。且由于使用了CDN，减轻了带宽压力。vuex

注意事项：
一、在第一步引入资源时注意 vue.js 必须在 vue-router、vuex、element-ui 以前引入。
二、在第二步修改配置时注意 “element-ui”: “ELEMENT” 是固定写法不能更改。
三、若是 element-ui 采用 cdn 引入的方式，vue 不采用 cdn 引入的方式，这样打包之后打开 dist 下的 index.html 时页面空白报错，必须 vue 和 element-ui 都采用 cdn 引入的方式。npm