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

    bootstrap CDN：https://www.bootcdn.cn
    Staticfile CDN：https://www.staticfile.org
    jsDelivr CDN：https://www.jsdelivr.com
    75 CDN：https://cdn.baomitu.com
    UNPKG：https://unpkg.com
    cdnjs：https://cdnjs.com

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

<!-- 引入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，将引用的外部模块导入，如下：
在这里插入图片描述

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

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

// 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.use(ElementUI);
// Vue.use(VueRouter);
// Vue.use(Vuex);

重新 npm run build，会看到此时 vendor.js 体积有所减小了很多。通过开发者模式的Network工具，可以看到 vue.js、vuex.js、vendor.js 等文件会分别由一个线程进行加载。且因为使用了CDN，减轻了带宽压力。

   

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

 

 

————————————————

原文链接：https://blog.csdn.net/LonewoIf/article/details/87777367