webpack性能优化-多进程打包

   cnpm i thread-loader –D

    开启多进程打包,进程启动大概为600s,进程通信也有开销(适合大项目使用)

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
 
process.env.NODE_ENV = 'production'
 
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.[contenthash:10].js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                enforce: 'pre', //优先执行，正常的，一个文件只能被一个loader处理，当一个文件要被多个loader处理，一定要指定loader执行的先后顺序，先执行eslint再执行babel
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            },
            //以下loader中只会匹配一个，注意不能有两个loader处理同一种类型文件，所以eslint-loader放在oneOf匹配之前执行
            {
                oneOf: [
                    {
                        test: /.js$/,
                        exclude: /node_modules/,
                        use:[
                            {
                                //开启多进程打包
                                loader:'thread-loader',
                                options:{
                                    workers:2  //进程2个
                                }
                            },
                            {
                                loader: 'babel-loader',
                                options: {
                                    presets: [
                                        ['@babel/preset-env', {
                                            useBuiltIns: 'usage',
                                            corejs: { version: 3 },
                                            targets: {
                                                chrome: '60',
                                                firefox: '50'
                                            }
                                        }]
                                    ],
                                    cacheDirectory: true //开启babel缓存，第二次构建时，会读取之前的缓存
                                }
                            }
                        ],
                    },
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ],
    mode: 'production'
}

进程启动大概为 600ms，进程通信也有开销，当只有工作消耗时间比较长时，才需要多进程打包