性能优化篇---Webpack构建速度优化

HappyPack并行构建优化

•  核心原理：将webpack中最耗时的loader文件转换操作任务，分解到多个进程中并行处理，从而减少构建时间。
•  HappyPack
•  接入HappyPack

        1. 安装：npm i -D happypack

        2. 重新配置rules部分,将loader交给happypack来分配：

const HappyPack = require('happypack');  
const happyThreadPool = HappyPack.ThreadPool({size: 5}); //构建共享进程池，包含5个进程  
...  
plugins: [  
    // happypack并行处理  
    new HappyPack({  
        // 用唯一ID来代表当前HappyPack是用来处理一类特定文件的，与rules中的use对应  
        id: 'babel',  
        loaders: ['babel-loader?cacheDirectory'],//默认设置loader处理  
        threadPool: happyThreadPool,//使用共享池处理  
    }),  
    new HappyPack({  
        // 用唯一ID来代表当前HappyPack是用来处理一类特定文件的，与rules中的use对应  
        id: 'css',  
        loaders: [  
            'css-loader',  
            'postcss-loader',  
            'sass-loader'],  
            threadPool: happyThreadPool  
    })  
],  
module: {  
    rules: [  
    {  
        test: /.(js|jsx)$/,  
        use: ['happypack/loader?id=babel'],  
        exclude: path.resolve(__dirname,' ./node_modules'),  
    },  
    {  
        test: /.(scss|css)$/,  
        //使用的mini-css-extract-plugin提取css此处，如果放在上面会出错  
        use: [MiniCssExtractPlugin.loader,'happypack/loader?id=css'],  
        include:[  
            path.resolve(__dirname,'src'),  
            path.join(__dirname, './node_modules/antd')  
        ]  
    },  
} 

•  参数：

        1. threads：代表开启几个子进程去处理这一类文件，默认是3个；

        2. verbose:是否运行HappyPack输出日志，默认true；

        3. threadPool：代表共享进程池，即多个HappyPack示例使用一个共享进程池中的子进程去处理任务，以防资源占有过多

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!