即刻起，加速您的前端构建

约定不等于承诺〃 2022-01-19 05:47 200阅读 0赞

> 本文由云+社区发表

> 作者：志航

## 构建 ##

影响前端发布速度的有两个方面，一个是构建，一个就是压缩，把这两个东西优化起来，可以减少很多发布的时间。

### thread-loader ###

[thread-loader][] 会将您的 `loader` 放置在一个 worker 池里面运行，以达到多线程构建。

把这个 loader 放置在其他 loader 之前（如下图 example 的位置）， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行。

#### Install ####

$ npm install --save-dev thread-loader
    复制代码

#### 用法 和 exmaple ####

// webpack.config.js
    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            include: path.resolve("src"),
            use: [
              "thread-loader",
              // 你的高开销的loader放置在此 (e.g babel-loader)
            ]
          }
        ]
      }
    复制代码

**每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制。请在高开销的loader中使用，否则效果不佳**

更多配置请查看： [github.com/webpack-con…][thread-loader]

### happypack ###

[happypack][]，通过多进程模型，来加速代码构建。从 github 的 starts 数量来看，happypack 使用的人数比较多，比较受欢迎。

#### 原理 ####

相关的技术原理这里不再累赘，可以查看淘宝FED的相关文章 [happypack 原理解析][happypack 1]

#### 用法和example ####

var HappyPack = require('happypack');
    var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
    
    // ... 省略其余配置
    module: {
      loaders: [
          {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract(
                'style',
                path.resolve(__dirname, './node_modules', 'happypack/loader') + '?id=less'
            )
          }
        ]
      },
      plugins: [
          new HappyPack({
            id: 'less',
            loaders: ['css!less'],
            threadPool: happyThreadPool,
            cache: true,
            verbose: true
          })
      ]
    复制代码

#### 构建方法总结 ####

从实际使用的情况来看，thread-loader 和 happypack 对于小型项目来说打包速度几乎没有影响，是因为它本身的额外开销，例如I/O，**建议只在大型项目中使用**，可以先测试再投入生产环境。

## 压缩 ##

### 不推荐使用 webpack-parallel-uglify-plugin ###

项目基本处于没人维护的阶段，issue 没人处理，pr没人合并。

### 推荐使用 terser-webpack-plugin ###

[terser-webpack-plugin][] 是一个使用 [terser][] 压缩js的webpack 插件。

压缩是发布前处理最耗时间的一个步骤，如果是你是在webpack 4 中，只要几行代码，即可加速你的构建发布速度。

#### 用法和 example ####

const TerserPlugin = require('terser-webpack-plugin');
    
    module.exports = {
      optimization: {
        minimizer: [new TerserPlugin(
          parallel: true   // 多线程
        )],
      },
    };
    复制代码

更多用法请查看上面链接。

### 总结 ###

随着 webpack 4 的优化，构建速度其实得到了极大的提升，也收到了parcel 等零配置Web应用打包工具的启发，其实 webpack 的配置日趋简洁，何不尝试配置一下呢？

**此文已由腾讯云+社区在各渠道发布**

**获取更多新鲜技术干货，可以关注我们[腾讯云技术社区-云加社区官方号及知乎机构号][-]**

转载于:https://juejin.im/post/5c89cc085188257afe2d8025

[thread-loader]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fwebpack-contrib%2Fthread-loader
[happypack]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Famireh%2Fhappypack
[happypack 1]: https://link.juejin.im?target=http%3A%2F%2Ftaobaofed.org%2Fblog%2F2016%2F12%2F08%2Fhappypack-source-code-analysis%2F
[terser-webpack-plugin]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fwebpack-contrib%2Fterser-webpack-plugin
[terser]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fterser-js%2Fterser
[-]: https://link.juejin.im?target=https%3A%2F%2Fwww.zhihu.com%2Forg%2Fteng-xun-yun-ji-zhu-she-qu%2Factivities