webpack生产环境优化：多线程打包

转载请注明 来源: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
                }
            }
        ],
    },

配置开启的多进程数量