Vue 打包後 vendor.js 體積太大，解決加載速度慢問題

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

在 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