机能优化篇---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示例行使一个共享历程池中的子历程行止理赏罚使命，以防资源占据过多

（编辑：湖南网）

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