happyPack和 ParallelUglifyPlugin也是提高webpack打包速度的两种方式。

• happyPack： 开启多进程打包
• ParallelUglifyPlugin：多进程压缩js

一、happyPack： 开启多进程打包

配置使用：

happy Pack多进程打包原理：
在整个 Webpack 构建流程中，最耗时的流程可能就是 Loader 对文件的转换操作了，因为要转换的文件数据巨多，而且这些转换操作都只能一个个挨着处理。 HappyPack 的核心原理就是把这部分任务分解到多个进程去并行处理，从而减少了总的构建时间。

从前面的使用中可以看出所有需要通过 Loader 处理的文件都先交给了 happypack/loader 去处理，收集到了这些文件的处理权后 HappyPack 就好统一分配了。

每通过 new HappyPack() 实例化一个 HappyPack 其实就是告诉 HappyPack 核心调度器如何通过一系列 Loader 去转换一类文件，并且可以指定如何给这类转换操作分配子进程。

核心调度器的逻辑代码在主进程中，也就是运行着 Webpack 的进程中，核心调度器会把一个个任务分配给当前空闲的子进程，子进程处理完毕后把结果发送给核心调度器，它们之间的数据交换是通过进程间通信 API 实现的。

核心调度器收到来自子进程处理完毕的结果后会通知 Webpack 该文件处理完毕。
happy pack 原理解析

参数说明：

二、ParallelUglifyPlugin：多进程压缩js

配置使用：

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

三、何时开启多进程打包或者压缩

使用注意⚠️：

• 不要上来就开启多进程打包，一般遇到性能瓶颈或者明确需要优化打包速度时，可以考虑采用这两种方案。
• 因为多进程也有有开销的，如进程的启动，销毁，通信等。

参考文章：https://www.jianshu.com/p/45911d63e8de

​​
​
js、jsx的模块配置

thread-loader | webpack 中文文档

使用时，需将此 loader 放置在其他 loader 之前。放置在此 loader 之后的 loader 会在一个独立的 worker 池中运行。

每个 worker 都是一个独立的 node.js 进程，其开销大约为 600ms 左右。同时会限制跨进程的数据交换。

请仅在耗时的操作中使用此 loader！

  {
                test: /\.(js|jsx)$/,
                use: [
                    {
                        loader: 'thread-loader',
                        options: {
                            workers: 1,
                            workerParallelJobs: 50,
                            workerNodeArgs: ['--max-old-space-size=1024'],
                            poolRespawn: false,
                            poolTimeout: 2000,
                            poolParallelJobs: 50,
                            name: 'js-thread-pool'
                        }
                    },
                    {
                        loader: 'babel-loader',
                        options: {
                            plugins: [
                                [
                                    'react-css-modules',
                                    {
                                        exclude: 'node_modules',
                                        webpackHotModuleReloading: true,
                                        filetypes: {
                                            '.less': {
                                                syntax: 'postcss-less'
                                            }
                                        },
                                        handleMissingStyleName: 'ignore',
                                        generateScopedName: '[name]__[local]___[chunkhash:base64:5]'
                                    }
                                ]
                            ],
                            cacheDirectory: true
                        }
                    }
                ],
                include: [
                    paths.src,
                    paths.lib
                ]
            },

​