即刻起，加速您的前端构建
原创
此刻正在回深圳的路上，想着写个最近在用的东西。如果你的项目也在使用发布系统或者是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 的配置日趋简洁，何不尝试配置一下呢？
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。