专栏首页前端探索即刻起,加速您的前端构建
原创

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

此刻正在回深圳的路上,想着写个最近在用的东西。如果你的项目也在使用发布系统或者是CI工具,而且项目比较大,发布经常需要耗费十几分钟,那么以下的工具可能会对你起作用。

构建

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

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-contrib/thread-loader

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 的配置日趋简洁,何不尝试配置一下呢?

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【React总结(三)】React 组件自动化测试与持续集成指北(2)

    通过 props 测试是一个很重要的测试过程,下吗我们设置 <Input /> 的 props 为 'test' ,测试组件是否表现正常,可以这样写。

    志航
  • 【React总结(一)】浅谈 React 中 key

    上周在处理项目的时候,由于之前项目中引用的是 cdn 中的生产环境的 React 所以导致所有在开发环境中应该暴露的 warnning 都被屏蔽了,上周修改了 ...

    志航
  • 你还在一个字一个字敲代码吗?【vscode snippets 入门教程】

    可能你用过一些 snippets ,也就是我们平时说的代码片段,就是只要敲几个字母,自动生成一大段代码,例如 React 创建一个组件的 snippets(如下...

    志航
  • 国内首获IMWUT优秀论文,清华大学团队揭示App使用行为

    作为普适计算领域公认的顶级会议,ACM UbiComp 为全球研究人员提供了一个探讨普适计算系统设计、开发、部署、评测和 理解等最新研究进展的多学科交叉交流平台...

    机器之心
  • Hybird App(一)----第一次接触

    之前一直在做JAVA的项目,最近要开发移动端,对App的开发刚开始的时候是没有任何概念的,有接触也就是玩手机用过的N多App,这算是真正意义山的第一次和App...

    令仔很忙
  • 第一个安卓App

    据报道,当前中国每天新增大约1100个App,移动应用市场总量达到449万款。在这样一个庞大的基数下,似乎没有什么业务领域和功能模块在移动应用市场是空白的,所以...

    luanhz
  • 学界 | SWATS:自动由Adam切换为SGD而实现更好的泛化性能

    机器之心
  • Linux学习笔记

    版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/...

    魏晓蕾
  • 用Eclipse开发Struts实例-G

    package com.meixin.beans; public class Guestbook { private int id; priva...

    py3study
  • Java程序员通往架构师的修炼之路

    Java架构

扫码关注云+社区

领取腾讯云代金券