webpack打包性能优化（三）uglify、happypack简介 webpack 打包时，性能优化的一些方式，组成了

简介

webpack 打包时，性能优化的一些方式，组成了这个系列文章，欢迎点赞和评论交流～

系列文章

使用 webpack-parallel-uglify-plugin 替代 UglifyJS 插件

jeffjade.com/2017/08/12/…
使用 webpack-parallel-uglify-plugin 替代 webpack.optimize.UglifyJsPlugin 并行混淆压缩 js 文件，打包时间从四分钟减到两分钟。用法和 UglifyJsPlugin 相同。

var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
    uglifyJS: {
        output: {
            comments: false  //去掉注释
        },
        compress: {
            warnings: false,
            drop_debugger: true,
            drop_console: true
        }
    }
}),

happypack 多进程执行 loader

原理
 配置方式
引入 happypack
支持的loader列表

module.exports  = {
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: "happypack/loader?id=happybabel",
                exclude: /node_modules/
            },
            {
                test: /.json$/,
                exclude: /node_modules/,
                loader: 'happypack/loader?id=happyjson',
                include: [
                    path.join(rootPath, "src/components"),
                    path.join(rootPath, "src/mockdata"),
                    path.join(rootPath, "src/views"),
                ]
            },
            {
                test: /.less$/,
                loader: ExtractTextPlugin.extract("style", "happypack/loader?id=happyless"),
                include: [
                    path.join(rootPath, "src/components/"),
                    path.join(rootPath, "src/assets"),
                    path.join(rootPath, "node_modules/antd"),
                ]
            },
        ]
    },
    plugins: [
        createHappyPlugin('happybabel', [{
            loader: 'babel-loader',
            query: {
                cacheDirectory: true,
                plugins: [
                    ["import", { "libraryName":  "antd", "style":  true }] // `style: true` 会加载 less 文件
                ]
            },
        }]),
        createHappyPlugin('happyjson', ['json-loader']),
        createHappyPlugin('happyless', ['css-loader?sourceMap!less']),
    ]
}
function createHappyPlugin(id, loaders) {
    return new HappyPack({
        id: id,
        loaders: loaders,
        threadPool: happyThreadPool,
        verbose: true
    });
}

优化后打包时间减少了 15s