Vue 優化總結之cdn優化，webpack.dll優化(附詳細操作)

 

vue 項目打包后vendor.js過大，導致打包速度慢，首頁加載慢。原因是第三方庫比如（vue，vue-router，axios）都會打包在vendor.js文件里面，下面給出兩種解決方案：

 

1.CDN優化(vue-cli3同樣適用)

 

 

cdn優化是指把第三方庫比如（vue，vue-router，axios）通過cdn的方式引入項目中，這樣vendor.js會顯著減少，並且大大提升項目的首頁加載速度，下面是具體操作：

1.1 cdn引入各種包

在index.html中把你用到的資源通過cdn引入，資源尋找鏈接：https://www.bootcdn.cn/

 1.2 配置webpack.base.conf.js（vue-cli3的話寫在vue.config.js文件中）

下面的externals對象的屬性名為package.json中對應的庫的名稱（固定寫法）,

屬性值為引入時你自定義的名稱（不固定，除了ELEMENT,ELEMENT是固定的寫法）

vue-cli2

 vue-cli3

 

 

補充幾點: 

 · ELEMENT是element-ui屬性值的固定寫法,其他的externals對象的屬性值必須和你自定義的名稱一樣；

 · 最好把cdn每個文件的版本號改成你package.json中的對應版本號；

·   vue.js一定要先引入

 

 · 如果擔心cdn不穩定可以加入代碼讓cdn沒讀取成功時加載本地資源（參考鏈接：https://blog.csdn.net/yangfeixien/article/details/88741492）：

 

 2.dll優化：

dll優化是把第三方庫單獨提取出來，而不是放在vendor.js里面，和cdn的區別是它們存在本地，比較穩定。

2.1 新建dll.js文件

在Vue-cli2搭建的項目中，在build文件夾下新建webpack.dll.js文件。

const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
    vendor: ['vue/dist/vue.esm', 'vue-router', 'axios'] //這里把vue,vue-router,axios提取出來，可以再添加
  },
  output: {
    path: path.join(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: "[name]_library" //這個名稱和下面的name值必須一樣
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, "../static/js/vendor-manifest.json"),
      name: "[name]_library" //這個名稱和上面的library值必須一樣
    })
  ]
}

2.2 在webpack.prod.conf.js中添加dll代碼

 3.3 在package.json中添加指令（"dll": "webpack --config build/webpack.dll.js"）

 

此時運行 npm run dll （static/js文件夾下會生成兩個文件）：

 3.4 在index.html中引入文件

<script src="./static/js/vendor.dll.js"></script>

3.5 此時已全部完成，以后只需要npm run build 就可以了

 

附上：

非網絡引用element-ui css導致圖標無法正常顯示的解決辦法

fonts文件下載地址：https://unpkg.com/element-ui@2.10.1/lib/theme-chalk/fonts/