1、序

最近對前端框架依賴webpack 進行升級，遇到了一點點坑和大家分享一下

2、DllPlugin 和 DllReferencePlugin

這對插件是進行項目優化的常用方案，其主要方式是 DllPlugin 將常用且不會輕易進行更改的依賴包進行抽離單獨打包；DllReferencePlugin 將打包輸出的內容 映射關系放置到項目中，在打包的時候，忽略這些文件（有點點像 externals，不過 externals 映射的文件來源，可以作為DllPlugin 的輸入 ）

// package.json  使用框架為vueCli5.x
//...
"scripts": {
     "dll": "webpack --config=webpack.dll.config.js ", // 不使用等號可以用空格代替，看習慣
     "dev":  "npm run  dll && vue-cli-service serve", // 不期望每次運行構建dll可以單獨分離
     "build": "npm run  dll && vue-cli-service build"  // 打包的時候，必須構建；當已經構建好后，打包體積會減小（畢竟抽離的大部分內容）
}

// webpack.dll.config.js 這個命名可以隨意取用，和package.json dll腳本指向同一位置即可
const webpack = require('webpack');

module.exports = {
  entry: {
   // 可以放置多個
    vendors: ['vue', 'vue-i18n','axios'],  // 放置你需要抽離的依賴
    // vendors2: ['qiankun']
  },
  output: {
    path: path.join(__dirname, 'dll'), // 存放動態鏈接庫的目錄
    filename: '[name].dll.js',       // 動態鏈接庫的名稱，如'vendors.dll.js'
    library: '[name]_library',       // 動態鏈接庫輸出的文件名
  },
  plugins: [
    // dll輸出文件*.manifest.json *.js
    new webpack.DllPlugin({
      name: '[name]_[hash]',        // 動態鏈接庫的全局變量名稱，需要和 output.library 中保持一致
      path: path.join(__dirname, 'dll', '[name].manifest.json'),     // 描述動態鏈接庫文件的 manifest.json 文件輸出時的文件名稱(路徑)
      context: __dirname, // 根據實際路徑自己配置
      entryOnly: false // 此乃神坑
    }),
  ],
};

// vue.config.js 
// DllReferencePlugin 使用
...
// dll 優化： 要忽略編譯的模塊
        config.plugins.push(
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: path.join(__dirname, 'dll', 'vendors.manifest.json'),  // 只需要這個映射json即可
            })
          // 可以配置多個
          // new webpack.DllReferencePlugin({
          //      context: __dirname,
          //      manifest: path.join(__dirname, 'dll', 'vendors2.manifest.json'),  // 只需要這個映射json即可
          //  })
        );
...

3、被更改的默認配置 -- DllPlugin options entryOnly （解密時間）

在webpack v4 中 entryOnly 默認值為true; 在v5 中默認值為false; 在官方升級文檔中也有一句話的描述(圖一所示):

圖一.png

entryOnly 代表的含義是什么呢？這里是官方DllPlugin說明（圖二所示）:表示是否僅僅暴露入口；總所周知，引用一個文件，其本身還會有其他引入；這個文件，就是入口；好家伙，這么重要的一個參數，居然被改動了，還如此輕描淡寫；

圖二.png

4、被忽略的tree-shaking

tree-shaking 算是webpack v5 的重大更新，將其作為默認優化（entryOnly 默認為true 便于dll的tree-shaking）也是無可厚非; 但是，在框架升級中，因為各種各樣的原因，我們會遇到各種品次的第三方庫，其會提供各類不同的能力，甚至一些也不支持tree-shaking；這個屬性，需要entryOnly：false; 需要加在升級的DllPlugin options 中；

以上，希望大家能有愉快的編程體驗~