Webpack5構建速度提升令人驚歎，早升級早受益

孤舟蓑翁發表於2021-05-13

為什麼要升級?

webpack4用的好好的，執行穩定，為什麼要升級到webpack5, 每次升級，都要經歷一場地震，處理許多loader和plugin API的破壞性改變。請給我們一個充分的升級理由，不然真的沒有動力去折騰。沒問題，給你們一個充分的理由，webpack5對構建速度做了突破性的改進，開啟檔案快取之後，再次構建，速度提升明顯。在我參與的專案中，本地伺服器開發環境，第一次構建速度是38.64s，第二次構建速度是1.69s，提升了一個數量級。My God, 是不是很驚喜，很意外。

生產打包構建速度，同樣有顯著提升，第一次打包耗時1.01m,第二次打包耗時10.95s. 看到這裡，你是不是有了升級的熱情，那請繼續往下看。

為什麼構建速度有了質的飛躍?

主要是因為：

1.webpack4是根據程式碼的結構生成chunkhash，新增了空白行或註釋，會引起chunkhash的變化，webpack5是根據內容生成chunkhash，改了註釋或者變數不會引起chunkhash的變化，瀏覽器可以繼續使用快取。

2.優化了對快取的使用效率。在webpack4 中，chunkId與moduleId都是自增id。只要我們新增一個模組，那麼程式碼中module的數量就會發生變化，從而導致moduleId發生變化，於是檔案內容就發生了變化。chunkId也是如此，新增一個入口的時候，chunk數量的變化造成了chunkId的變化，導致了檔案內容變化。所以對實際未改變的chunk檔案不能有效利用。webpack5採用新的演算法來計算確定性的chunkId和moduleId。可以有效利用快取。在production模式下，optimization.chunkIds和optimization.moduleIds預設會設為’deterministic’。

3.新增了可以將快取寫入磁碟的配置項, 在命令列終止當前構建任務，再次啟動構建時，可以複用上一次寫入硬碟的快取，加快構建過程。

這兩項的預設配置為：

module.exports = (env) => {
  return {
    splitChunks: {
        chunks: 'async',         // 指明要分割的外掛型別, async:非同步外掛(動態匯入),inital:同步外掛,all：全部型別
        minSize: 20000,          //檔案最小大小,單位bite;即超過minSize有可能被分割；
        minRemainingSize: 0,     // webpack5新屬性，防止0尺寸的chunk
        minChunks: 1,            // 被提取的模組必須被引用1次
        maxAsyncRequests: 30,    // 非同步載入程式碼時同時進行的最大請求數不得超過30個
        maxInitialRequests: 30,  // 入口檔案載入時最大同時請求數不得超過30個
        enforceSizeThreshold: 50000,
        cacheGroups: {
          // 分組快取
          // 將來自node_modules的模組提取到一個公共檔案中 （由v4的vendors改名而來）
          defaultVendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            reuseExistingChunk: true,
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
          },
        },
      },
    },
};

開啟升級之旅

webpack每個大版本的升級，都是破壞性變革，很少向後相容，webpack4到webpack5的升級，同樣也不例外。升級猶如去西天取經一樣，需要經過九九八十一難，才能取得真經，體會到成就感。只要沒有堅持到最後，就會前功盡棄。所以一定要有耐心。好了，廢話不多說。現在進入這個章節的主題，細數一下升級過程中踩過的各種坑。

我對webpack的升級之旅是這樣開始的，直接在webpack4的webpack.config.js新增與提升構建速度有關的配置

module.exports = () => {
  return {
    // ...
    optimization: {
      // 此設定保證有新增的入口檔案時,原有快取的chunk檔案仍然可用
      moduleIds: "deterministic",
      // 值為"single"會建立一個在所有生成chunk之間共享的執行時檔案
      runtimeChunk: "single",
      splitChunks: {
        // 設定為all, chunk可以在非同步和非非同步chunk之間共享。
        chunks: 'all', 
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendors",
            chunks: "all",
          },
        },
      },
    },
    cache: {
      // 將快取型別設定為檔案系統,預設是memory
      type: "filesystem",
      buildDependencies: {
        // 更改配置檔案時，重新快取
        config: [__filename],
      },
    },
  };
};

報如下錯誤，webpack4 optimization.moduleIds不能設定為deterministic。

於是對webpack4進行升級, 從"webpack": "^4.39.1"升級到"webpack": "^5.36.1",，升級後，啟動編譯，報如下錯誤 configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$"

將devtool的配置由devtool: 'cheap-module-eval-source-map'改為devtool: 'eval-cheap-module-source-map', 繼續前行，編譯報如下錯誤：

升級 "html-webpack-plugin": "^3.2.0"到"html-webpack-plugin": "^5.3.1",繼續前行，編譯報如下錯誤：Cannot read property 'normal' of undefined

這次既有警告，又有報錯，經查告警和報錯是由於webpack5的API發生改變,而基於webpack4 API開發的一些node工具包還未同步變更, 版本與webpack5不相容引起的，頭痛醫頭，腳痛醫腳，會事倍功半，不勝其煩。於是決定放大招，升級package.json中所有的開發時依賴到最新版本。

yarn upgrade-interactive --latest

對標紅的開發依賴包進行升級後，繼續前行，編譯報如下錯誤 Cannot find module 'webpack-cli/bin/config-yargs'

經查，是因為webpack-cli4移除了yargs模組，除了要註釋掉專案中對yargs模組的引用，還要修改package.json裡面webpack-dev-server的寫法, 將'webpack-dev-server'改為'webpack serve'。

    "start:local": "cross-env NODE_ENV=development webpack-dev-server --config webpack/dev.js --progress --mode development --current-env local",
    "start:dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack/dev.js --progress --mode development --current-env dev",
    "start:test": "cross-env NODE_ENV=development webpack-dev-server --config webpack/dev.js --progress --mode development --current-env test",
    "start:prod": "cross-env NODE_ENV=development webpack-dev-server --config webpack/dev.js --progress --mode development --current-env prod",

    "start:local": "cross-env NODE_ENV=development webpack serve --config webpack/dev.js --progress --mode development --current-env local",
    "start:dev": "cross-env NODE_ENV=development webpack serve --config webpack/dev.js --progress --mode development --current-env dev",
    "start:test": "cross-env NODE_ENV=development webpack serve --config webpack/dev.js --progress --mode development --current-env test",
    "start:prod": "cross-env NODE_ENV=development webpack serve --config webpack/dev.js --progress --mode development --current-env prod",

改完之後，繼續前行，編譯報如下錯誤 Unknown options

經查是因為webpack-cli的引數寫法不對，於是按照官方文件修改為

    "start:local": "cross-env NODE_ENV=development webpack serve --config webpack/dev.js --progress --mode development  --env currentEnv=local",
    "start:dev": "cross-env NODE_ENV=development webpack serve --config webpack/dev.js --progress --mode development --env currentEnv=dev",
    "start:test": "cross-env NODE_ENV=development webpack serve --config webpack/dev.js --progress --mode development --env currentEnv=test",
    "start:prod": "cross-env NODE_ENV=development webpack serve --config webpack/dev.js --progress --mode development --env currentEnv=prod",

獲取命令列自定義引數的寫法改為

module.exports = (env) => {
  const currentEnv = env.currentEnv;
  //...
}

改完之後，繼續前行，編譯報如下錯誤：TypeError: merge is not a function

經查是最新版本的webpack-merge的merge匯出方式有問題，修改merge的匯出方式為

const { merge } = require('webpack-merge');

改完之後，繼續前行，編譯報如下錯誤: this.getOptions is not a function

經查是less-loader的配置寫法導致的，按照最新版本的配置寫法，修改less和module.less載入器的配置

const lessLoader = [
  "css-loader",
  "postcss-loader",
  {
    loader: "less-loader",
    options: { lessOptions: { javascriptEnabled: true } },
  },
];

module.exports = () => {
  return {
    // ...
    module: {
      rules: [
        {
          test: lessReg,
          exclude: lessModuleReg,
          use: isDev
            ? ["style-loader", ...lessLoader]
            : [MiniCssExtractPlugin.loader, "happypack/loader?id=less"],
        },
        {
          test: lessModuleReg,
          exclude: path.resolve(__dirname, "./node_modules"),
          // include: [path.resolve(__dirname, '../src')],
          use: isDev
            ? ["style-loader", ...lessLoader]
            : [
                MiniCssExtractPlugin.loader,
                "happypack/loader?id=lessWithModule",
              ],
        },
      ],
    },
  };
};

繼續前行，編譯有如下警告: consider using [chunkhash] or [contenthash]

將專案配置中用到hash的地方，修改成contenthash

module.exports = () => {
  return {
    // ...
    output: {
      path: path.resolve(rootPath, "./dist"),
      filename: isDev
        ? "js/[name].[contenthash:8].js"
        : "js/[name].[chunkhash:8].js",
      publicPath,
    },
    module: {
      rules: [
        {
          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.ico$/],
          loader: "url-loader",
          options: {
            limit: 10000,
            name: isDev
              ? "image/[name][contenthash:8].[ext]"
              : "image/[name].[contenthash:8].[ext]",
          },
        },
        {
          // 新增otf字型支援
          test: /\.(woff|svg|eot|ttf|otf)\??.*$/,
          loader: "url-loader",
          options: {
            limit: 10000,
            name: isDev
              ? "font/[name][contenthash:8].[ext]"
              : "font/[name].[contenthash:8].[ext]",
          },
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: isDev
          ? "css/[name][contenthash:8].css"
          : "css/[name].[chunkhash:8].css",
        chunkFilename: isDev
          ? "css/[id][contenthash:8].css"
          : "css/[id].[chunkhash:8].css",
        ignoreOrder: false,
      }),
    ],
  };
};

修改完之後，本地開發環境終於不報錯了。可是發現修改程式碼之後頁面不自動重新整理。經查是webpack5的bug, 如果在 package.json 裡面寫了 browserslist，會導致熱更新失效，解決方案是在 webpack 配置中設定 target 欄位，在開發階段使得 browserslist 失效

module.exports = (env) => {
  return {
    // ...
    target: process.env.NODE_ENV === "development" ? "web" : "browserslist",
  };
};

再看看生產編譯打包是否正常。

執行yarn build:prod之後，報如下錯誤 MainTemplate.hooks.hashForChunk is deprecated，這個報錯前面遇到過，一看就是生產模式用到的不同於開發模式的外掛，與webpack5不相容導致的。

經查解決方案是用 terser-webpack-plugin替換原來的js壓縮外掛uglifyjs-webpack-plugin

const TerserPlugin = require('terser-webpack-plugin'); // 對js進行壓縮

module.exports = () => {
  return {
    // ...
    optimization: {
        minimize: true,
        minimizer: [
          // terserPlugin是webpack推薦及內建的壓縮外掛，cache與parallel預設為開啟狀態
          // 快取路徑在node_modules/.cache/terser-webpack-plugin
          new TerserPlugin({
            terserOptions: {
              // https://github.com/terser/terser#minify-options
              compress: {
                warnings: false, // 刪除無用程式碼時是否給出警告
                drop_debugger: true, // 刪除所有的debugger
                // drop_console: true, // 刪除所有的console.*
                pure_funcs: [''],
                // pure_funcs: ['console.log'], // 刪除所有的console.log
              },
            },
          }),
          new CssMinimizerPlugin(),
        ],
      },
  };
};

改完之後，編譯報許多如下錯誤: You forgot to add 'mini-css-extract-plugin'

經查是因為webpack5中，happypack不再支援less-loader，修改配置檔案,less-loader不開啟多程式編譯

module.exports = () => {
  return {
    // ...
    module: {
      rules: [
        {
          test: lessReg,
          exclude: lessModuleReg,
          // use: isDev ? ['style-loader', ...lessLoader] : ['happypack/loader?id=less'],
          use: isDev
            ? ["style-loader", ...lessLoader]
            : [MiniCssExtractPlugin.loader, ...lessLoader],
        },
        {
          test: lessModuleReg,
          exclude: path.resolve(__dirname, "./node_modules"),
          // include: [path.resolve(__dirname, '../src')],
          // use: isDev
          //   ? ['style-loader', ...lessLoader]
          //   : ['happypack/loader?id=lessWithModule'],
          use: isDev
            ? ["style-loader", ...lessLoader]
            : [MiniCssExtractPlugin.loader, ...lessLoader],
        },
      ],
    },
    plugins: [
        // new Happypack({
        //   id: 'less',
        //   threadPool: happyThreadPool,
        //   use: [MiniCssExtractPlugin.loader, ...lessLoader],
        // }),
        // new Happypack({
        //   id: 'lessWithModule',
        //   threadPool: happyThreadPool,
        //   use: [MiniCssExtractPlugin.loader, ...lessLoader],
        // }),
      ],
  };
};

修改之後，繼續編譯，報如下錯誤：Module not found: Error: Can't resolve 'crypto'

經查webpack4 引入crypto-js模組會自動引入polyfill: crypto-browserify, webpack5預設會自動將path、crypto、http、stream、zlib、vm的node polyfill剔除，為了不影響之前的業務，我們手動新增這個工具包

yarn add -D crypto-browserify

module.exports = () => {
  return {
    // ...
    resolve: {
        fallback:{
            "stream": false,
            "buffer": false,
            "crypto": require.resolve("crypto-browserify")
          }
      },
  };
};

改完之後，編譯報如下警告: Conflicting values for 'process.env'

經查是webpack5 定義全域性變數的寫法改變了，按照最新的語法修改如下：

module.exports = () => {
  return {
    // ...
    plugins: [
      // webpack5 定義環境變數的寫法變了
      new webpack.DefinePlugin({
        "process.env.WX_JS_SDK_ENABLED": WX_JS_SDK_ENABLED,
        "process.env.CURRENT_ENV": JSON.stringify(currentEnv),
        "process.env.RELEASE_VERSION": JSON.stringify(RELEASE_VERSION),
      }),

      // webpack4的寫法
    //   new webpack.DefinePlugin({
    //     "process.env": {
    //       WX_JS_SDK_ENABLED: WX_JS_SDK_ENABLED, // 是否真機除錯SDK模式
    //       CURRENT_ENV: JSON.stringify(currentEnv),
    //       RELEASE_VERSION: JSON.stringify(RELEASE_VERSION),
    //     },
    //   }),
    ],
  };
};

修改完之後，編譯報如下錯誤：optimizeChunkAssets is deprecated

經查是optimize-css-assets-webpack-plugin外掛與webpack5不相容引起的警告，webpack5中同等功能的外掛是css-minimizer-webpack-plugin，安裝並修改配置

yarn add -D css-minimizer-webpack-plugin

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); // 對CSS進行壓縮
module.exports = () => {
  return {
    // ...
    optimization: {
      minimize: true,
      minimizer: [
        // ...
        // new OptimizeCSSAssetsPlugin(),
        new CssMinimizerPlugin(),
      ],
    },
  };
};

改好之後，編譯報如下錯誤 complier.plugin is not a function

經查是webpack-cos-plugin外掛報的錯， Webpack5 釋出後，各大主流 plugin 都已經相繼適配webpack5新的plugin api, 而webpack-cos-plugin最新的版本是兩年前的，近期沒有做過維護，看完官網文件後，手動修復一下

compiler.hooks.emit.tap('WebpackQcloudCOSPlugin', (compilation) => {
    var files = _this.pickupAssetsFiles(compilation);
    log('' + green('\nCOS 上傳開始......'));
    _this
        .uploadFiles(files, compilation)
        .then(function () {
        log('' + green('COS 上傳完成\n'));
        })
        .catch(function (err) {
        log(red('COS 上傳出錯') + '::: ' + red(err.code) + '-' + red(err.name) + ': ' + red(err.message));
        _this.config.ignoreError || compilation.errors.push(err);
        });
});

然後在Linux機器上部署打包編譯時，用修改之後的檔案替換node_modules下的同名檔案

\cp  -rf webpack/cos/index.js node_modules/webpack-cos-plugin/lib

執行打包命令，這次終於可以正常打包上傳了，可是發現，打包之後的檔案，頁面中有些圖片展示不出來，經查，未載入出來的圖片，src的值是[object Module]

通過樣式名查詢，發現程式碼中凡是通過require給圖片的src屬性賦值的圖片都載入不出來

<img src="require('assets/xxx.png')"/>

原因是url-loader最新版本預設情況下會把require引入的內容當做esModules去處理,而不是解析內容本身，所以要關閉預設解析方式。

module.exports = (env) => {
    return {
        // ...
        module: {
            rules: [
            {
                test: /\.(png|jpe?g|gif|ico|bmp)$/i,
                use: [
                {
                    loader: 'url-loader',
                    options: {
                        esModule: false, // 增加這一句
                        limit: 10000,
                        name: isDev ? 'image/[name][hash:8].[ext]' : 'image/[name].[contenthash:8].[ext]',
                    },
                },
                ],
            },
            ],
        },
    }
}

至此，大功告成。本地開發和生產打包所有的升級報錯問題都已解決。可以愉快地享受webpack5帶來全新打包體驗。

參考文章

https://stackoverflow.com/questions/59070216/webpack-file-loader-outputs-object-module
https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5
https://webpack.js.org/api/cli/#env
https://webpack.docschina.org/blog/2020-10-10-webpack-5-release/
https://www.npmjs.com/package/webpack-cos-plugin
https://blog.csdn.net/qq_36741436/article/details/78732201
https://webpack.js.org/api/plugins/#plugin-types

在Linux命令列下令人驚歎的驚歎號（!）
2015-06-11
Linux命令列
20個令人驚歎的桌面Docker容器
2015-06-09
Docker
幾個令人驚歎的函式影象
2011-06-24
函式
創造令人驚歎的遊戲關卡——從構圖開始
2019-11-27
遊戲
12個令人驚歎的CSS實驗專案
2019-02-16
CSS
那些令人驚歎的 HTML、CSS、JavaScript 工具和庫
2017-05-09
HTMLCSSJavaScript
10個令人驚歎的HTML5和JavaScript效果
2011-06-30
HTMLJavaScript
ES13中11個令人驚歎的 JavaScript 新特性
2023-09-19
JavaScript
升級Webpack5實踐
2021-10-22
Web
9款令人驚歎的HTML5 3D動畫應用
2014-11-12
HTML3D動畫
令人驚歎的百度Echarts，大資料分析的必備工具
2020-11-05
Echarts大資料
怎樣將Gradle構建速度提升90%
2020-02-16
Gradle
Python 中的這些坑，早看早避免
2018-11-30
Python
開發者談失敗：有很多令人驚歎的故事卻沒有成功的結局
2022-06-14
使用 happypack 提升 Webpack 專案構建速度
2019-02-21
APPWeb
使用 Webpack 的 DllPlugin 提升專案構建速度
2019-02-15
WebPlugin
提升開發效率-構建速度與快速配置
2017-12-02
《路易吉鬼屋3》：將令人驚歎的創意設計在遊戲的各個細節
2020-04-15
遊戲
Android 應用構建速度提升Gradle配置優化
2020-10-08
AndroidGradle優化
升級優化Webpack4，使你的打包速度提升200%以上！
2019-05-10
優化Web
重溫《殺手》：高自由度開放式關卡設計，令人驚歎的動態遊戲世界
2020-02-27
遊戲
7個讓你驚歎的HTML技巧
2021-09-10
HTML
使用webpack構建時，如何使你的專案打包速度提升68% ？
2018-08-28
Web
使用 HappyPack 和 DllPlugin 來提升你的 Webpack 構建速度
2017-07-04
APPPluginWeb
Apple推出了令人驚歎的耳掛式設計AirPods Max，這是AirPods的魔力
2021-01-20
APPAI
過早引用“過早優化是萬惡之源”是所有緩慢軟體的根源 - JakeWharton
2019-08-31
優化
早該知道的7個JavaScript技巧
2014-09-12
JavaScript
過早優化是萬惡之源
2012-08-10
優化
谷歌Transformer再升級——新模型實現效能、速度雙提升，發展潛力巨大
2020-11-06
谷歌ORM模型
早產的《HelloGitHub》第 65 期
2021-08-27
Github
避免過早的軟體抽象 - Jonas
2021-11-19
抽象
提升PHP速度
2014-06-09
PHP
固建建築智慧機器人，推動鋼結構產業升級
2021-06-11
機器人產業
7 個讓人驚歎的 HTML5 滑鼠動畫
2021-09-09
HTML動畫
Android Note - 構建速度優化
2019-03-26
Android優化
《意航員 2》GI 評測 9 分：每分每秒都令人讚歎
2021-09-03
知行社的前端早讀課第1期
2021-09-09
前端
開源早讀課週刊：第3期
2021-08-06

Webpack5構建速度提升令人驚歎，早升級早受益

為什麼要升級?

為什麼構建速度有了質的飛躍?

開啟升級之旅

相關文章