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

13651657101 发布于2019-08-26 13:37 / 3143人阅读

摘要：会将您的放置在一个池里面运行，以达到多线程构建。请在高开销的中使用，否则效果不佳更多配置请查看，通过多进程模型，来加速代码构建。压缩是发布前处理最耗时间的一个步骤，如果是你是在中，只要几行代码，即可加速你的构建发布速度。

本文由云+社区发表

作者：志航

构建

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

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中使用，否则效果不佳

更多配置请查看： https://github.com/webpack-co...

happypack

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

原理

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

用法和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://www.ucloud.cn/yun/109195.html

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

摘要：会将您的放置在一个池里面运行，以达到多线程构建。请在高开销的中使用，否则效果不佳更多配置请查看，通过多进程模型，来加速代码构建。压缩是发布前处理最耗时间的一个步骤，如果是你是在中，只要几行代码，即可加速你的构建发布速度。本文由云+社区发表作者：志航构建影响前端发布速度的有两个方面，一个是构建，一个就是压缩，把这两个东西优化起来，可以减少很多发布的时间。 thread-loade...

shmily 2019-08-02 14:31 评论0 收藏0
UCloud怪兽主机再升级新快杰3+1让超强算力即刻可得

摘要：快杰云主机发布款全新机型在去年大会上，云主机团队推出了万网络性能万存储性能的快杰云主机。但同时价格则与上一代快杰持平，升频不加价。其中在的跑分中，快杰与上代快杰相比算力提升。除了上述三款性能主机外，上还发布了采用处理器的快杰型预览版。10月23日以构建·创见|为主题的UCloud用户大会暨Think in Cloud 2020（以下简称TIC）在上海召开。在本次大会上，UCloud推出了历经...

Tecode 2022-06-28 18:59 评论0 收藏0
云适配开放平台内测“挑刺有奖” ：赢土豪金

2013年，你是甲方，我是乙方，我为你云适配。 2014年，我的地盘你做主，云适配攻城狮们的工作阵地将全权授权给你，你可以自由的 DIY 您的网站，No more time，No Money，只要1天，只要1个人，只要2步，云适配开放平台一站搞定，您的跨屏网站即刻诞生了！！！ BUT，BUT，BUT，在你开始完全做主前，我们想邀请您来参与云适配开放平台的内测，只要您具备最基础的前端开发技术，拥有一...

vvpale 2019-08-28 17:54 评论0 收藏0
云适配开放平台内测“挑刺有奖” ：赢土豪金

2013年，你是甲方，我是乙方，我为你云适配。 2014年，我的地盘你做主，云适配攻城狮们的工作阵地将全权授权给你，你可以自由的 DIY 您的网站，No more time，No Money，只要1天，只要1个人，只要2步，云适配开放平台一站搞定，您的跨屏网站即刻诞生了！！！ BUT，BUT，BUT，在你开始完全做主前，我们想邀请您来参与云适配开放平台的内测，只要您具备最基础的前端开发技术，拥有一...

TesterHome 2019-08-14 11:43 评论0 收藏0