轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack生產環境優化：多線程打包

多線程打包主要用于需要打包的文件較多的情況下提高打包效率，縮短打包時間。
注意：開啟多進程打包時，進程開啟大概需要600ms，進程通信也有開銷。
建議：只有工作消耗時間比較長時，才開啟多進程打包。否則可能開多進程打包后，花費的時間會更長。

一、下載插件

多線程打包需要插件thread-loader的支持。
這里使用thread-loader@2.1.3

> npm i -D thread-loader@2.1.3

二、核心配置

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/

// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');



module.exports = {
    // webpack配置
    // 入口起點文件
    entry: './src/js/index.js',
    // 輸出
    output: {
        // 輸出文件名
        filename: 'js/built.[contenthash:10].js',
        // 輸出路徑
        // __dirname nodejs的變量,代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build'),
    },
    // loader的配置
    module: {
        rules: [

            // 詳細loader配置
            //不同文件必須配置不同loader處理


           ……

            {
                // 以下 loader 只會匹配一個
                // 注意：不能有兩項配置處理同一種類型的文件
                // 例如：js文件的語法檢查和兼容性處理，不能放在同一個oneOf中。
                oneOf: [

                    ……

                    /*
                         js兼容性處理:babel-loader @babel/core @babel/preset-env
                         1.基本js兼容性處理 @babel/preset-env
                         問題：只能轉換基本語法，如promise不能轉換 
                         2．全部js兼容性處理 --> @babel/polvfill
                         問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~ 
                         3. 需要做兼容性處理的就做：按需加載 --> core-js
                         */
                    {
                        test: /\.(?:js|mjs|cjs)$/,
                        exclude: /node_modules/,
                        use: [
                            /* 
                                開啟多進程打包 
                                進程啟動大概為600ms，進程通信也有開銷。
                                只有工作消耗時間比較長，才需要多進程打包     
                            */

                            {
                               loader: "thread-loader",
                               options:{
                                workers:2 //啟用兩個進程
                               }
                            },
                            {
                                // 指定檢查的目錄，或者配置排除某些文件夾
                                // include: [path.resolve(__dirname, 'src')], 
                                // 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
                                loader: "babel-loader",
                                options: {
                                    // 預設：指示 babel 做怎么樣的兼容性處理
                                    "presets": [
                                        [
                                            "@babel/preset-env",
                                            {
                                                // 按需加載
                                                useBuiltIns: 'usage',
                                                // 制定 core-js 版本
                                                corejs: {
                                                    version: 3
                                                },
                                                //指定兼容性做到哪個版本的瀏覽器
                                                targets: {
                                                    chrome: '60',
                                                    firefox: '60',
                                                    ie: '9',
                                                    safari: '10',
                                                    edge: '17'
                                                }
                                            }
                                        ]
                                    ],
                                    // 開啟babel緩存
                                    //第二次構建時，會讀取之前的緩存
                                    cacheDirectory: true
                                }
                            }
                        ],
                    },
                    
              ……
              
                ]// oneOf  [] end
            }// oneOf {} end
        ],
    },

            ……
            
    // 模式  development  開發環境，production 生產環境
    // mode: 'development',
    // 生產環境下會自動壓縮js代碼
    mode: 'production',
        
            ……

};

核心配置

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/
……
    {
        test: /\.(?:js|mjs|cjs)$/,
        exclude: /node_modules/,
        use: [
            /* 
                開啟多進程打包 
                進程啟動大概為600ms，進程通信也有開銷。
                只有工作消耗時間比較長，才需要多進程打包     
            */
            "thread-loader",
            {
                loader: "babel-loader",
                options: {
                    // 預設：指示 babel 做怎么樣的兼容性處理
                    "presets": [
                       ……
                    ],
                    // 開啟babel緩存
                    //第二次構建時，會讀取之前的緩存
                    cacheDirectory: true
                }
            }
        ],
    },

thread-loader通常配置在js兼容性檢查中，當然也可以運用于其他loader配置。

OR

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/
……
    {
        test: /\.(?:js|mjs|cjs)$/,
        exclude: /node_modules/,
        use: [
            /* 
                開啟多進程打包 
                進程啟動大概為600ms，進程通信也有開銷。
                只有工作消耗時間比較長，才需要多進程打包     
            */
            {
               loader: "thread-loader",
               options:{
                    workers:2 //啟用兩個進程
               }
            },
            {
                loader: "babel-loader",
                options: {
                    // 預設：指示 babel 做怎么樣的兼容性處理
                    "presets": [
                       ……
                    ],
                    // 開啟babel緩存
                    //第二次構建時，會讀取之前的緩存
                    cacheDirectory: true
                }
            }
        ],
    },

配置開啟的多進程數量