webpack高级概念，happyPack多进程打包打包速度快系列十九)

关于开启多进程
1.项目较大，打包较慢，开启多进程能提高速度
2.项目较少，打包很快，开启多进程会降低速度（进程开销）

 

 

happyPack多进程打包
js单线程，开启多进程打包，提高构建打包速度

在生产环境配置，开发环境配置也可以, 安装happyPack

webpack.config.js

const HappyPack = require('happypack')

 rules: [
            // js
            {
                test: /\.js$/,
                // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
                use: ['happypack/loader?id=babel'],
                include: srcPath,
                // exclude: /node_modules/
            },

   plugins: [
        new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
        new webpack.DefinePlugin({
            // window.ENV = 'production'
            ENV: JSON.stringify('production')
        }),

        // 抽离 css 文件
        new MiniCssExtractPlugin({
            filename: 'css/main.[contentHash:8].css'
        }),

        // 忽略 moment 下的 /locale 目录
        new webpack.IgnorePlugin(/\.\/locale/, /moment/),

        // happyPack 开启多进程打包
        new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
            id: 'babel',
            // 如何处理 .js 文件，用法和 Loader 配置中一样
            loaders: ['babel-loader?cacheDirectory']
        }),

 

parallelUglifyPlugin 多进程压缩js
webpack内置Uglify工具压缩js
js单线程，开启多进程压缩更快,  生产环境配置， 安装webpack-parallel-uglify-plugin

 

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

//plugin配置
  // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
        new ParallelUglifyPlugin({
            // 传递给 UglifyJS 的参数
            // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
            uglifyJS: {
                output: {
                    beautify: false, // 最紧凑的输出
                    comments: false, // 删除所有的注释
                },
                compress: {
                    // 删除所有的 `console` 语句，可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            }
        })