前端優化（三）：使用dll打包抽取第三方js（DllPlugin DllReferencePlugin插件）

三、抽取第三方js，使用dll打包

第一章內容：前端優化（一）：開啓nginx gzip壓縮

第二章內容：前端優化（二）：使用路由懶加載

本文繼續前兩章內容，繼續講解第三個前端優化方案：抽取第三方js。

隨着項目增長，引入的第三方js也越來越大。webpack將第三方js默認打成一個包，導致該js文件越來越龐大，嚴重影響首屏加載 。

1.創建抽取的文件對象

在項目根目錄創建一個dll.config.js文件，配置需要抽取的第三方js，只是一個普通的js文件，可以修改成你想要的名字。

module.exports = {
  library: {
    vue: ["vue", "vue-router", "vuex"],
    others: ["axios", "js-cookie", "blueimp-md5"],
    dplayer: ["dplayer"],
    cos: ["cos-js-sdk-v5"],
    vod: ["vod-js-sdk-v6"],
    distpicker: ["v-distpicker"]
  }
};

library對象中，鍵爲抽取後的js名稱，值爲一個數組，配置你項目中需要抽取的第三方js。

鍵越多，抽取的js文件越多。值越多，抽取的文件越大。各位根據自己項目的實際情況平衡。

2.安裝clean-webpack-plugin插件

使用 clean-webpack-plugin 清除之前冗餘的dll文件

npm install --save-dev clean-webpack-plugin

3.使用DllPlugin

在項目根目錄創建 webpack.dll.conf.js 文件, 內容如下：

const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { library } = require("./dll.config.js");

// dll文件存放的目錄
const dllPath = "public/vendor";
module.exports = {
  // 入口文件
  entry: {
    ...library
  },
  // 輸出文件
  output: {
    path: path.join(__dirname, dllPath),
    filename: "MyDll.[name].js",
    library: "[name]_[hash]"
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, "[name]-manifest.json"),
      name: "[name]_[hash]"
    })
  ]
};

4.在package.json添加打包信息

在根項目錄中找到package.json文件，在script對象內添加"dll": "webpack -p --progress --config ./webpack.dll.conf.js"。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:test": "vue-cli-service build --mode test",
    "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
  },

5.打包第三方js

運行npm命令

npm run dll

運行命令後可能遇到以下情況，輸入yes回車。安裝完後，重新運行一下命令。

接下來，我們可以看到，在public文件下，已經生成了我們想要的js，以及mainfest.json文件。

6.在webpack中配置DllReferencePlugin

使用該插件，遇到require 在manifest中存在的庫，不會再打進包裏，而是運行時到指明的dll庫中找。
在webpack生產環境配置中，（如果是vue項目，在根目錄添加 vue.config.js文件） 添加如下代碼，二種配置二選一。

webpack配置：

const path = require("path");
const webpack = require("webpack");
const dllPath = "./public/vendor/";
const { library } = require("./dll.config.js");

plugins: [
   ...Object.keys(library).map(name => {
     return new webpack.DllReferencePlugin({
       context: ".",
       manifest: path.join(dllPath, `${name}-manifest.json`)
     });
   })
]

vue.config.js配置

const path = require("path");
const webpack = require("webpack");
const dllPath = "./public/vendor/";
const { library } = require("./dll.config.js");

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      // 爲生產環境修改配置...
      let pluginsPro = [
        ...Object.keys(library).map(name => {
          return new webpack.DllReferencePlugin({
            context: ".",
            manifest: path.join(dllPath, `${name}-manifest.json`)
          });
        })
      ];
      config.plugins = config.plugins.concat(pluginsPro);
    }
  }
};

path 和 webpack 是默認的，不需要安裝。
dllPath 是前面配置的第三方js的生成目錄。
library 是前面配置的js文件對象。

因爲 DllReferencePlugin 配置需要一個個的添加，太過頻繁與重複，所以我抽取出了一個dll.config.js文件，使用循環讀取的方式添加。

7.引入js

打開index.html文件，在body標籤內底部位置加入我們生成的js。

<script src="<%= BASE_URL %>vendor/MyDll.vue.js"></script>
<script src="<%= BASE_URL %>vendor/MyDll.others.js"></script>
<script src="<%= BASE_URL %>vendor/MyDll.dplayer.js"></script>
<script src="<%= BASE_URL %>vendor/MyDll.cos.js"></script>
<script src="<%= BASE_URL %>vendor/MyDll.vod.js"></script>
<script src="<%= BASE_URL %>vendor/MyDll.distpicker.js"></script>

文件路徑中<%= BASE_URL %>爲vue cli 3中讀取根目錄的寫法，使用其他框架的請使用自己的寫法。只要將js文字引入，並能有效讀取到即可。

總結：

只要運行 npm run dll 命令打包一次即可，除非配置文件改變，需要再次打包第三方js，同時也需要修改在 index.html 中的引入文件。