此刻正在回深圳的路上,想着写个最近在用的东西。如果你的项目也在使用发布系统或者是CI工具,而且项目比较大,发布经常需要耗费十几分分钟,那么以下的工具可能会对你起作用。
构建
影响前端发布速度的有两个方面,一个是构建,一个就是压缩,把这两个东西优化起来,可以减少很多发布的时间。
thread-loader
thread-loader 会将您的 loader
放置在一个 worker 池里面运行,以达到多线程构建。
把这个 loader 放置在其他 loader 之前, 放置在这个 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", // your expensive loader (e.g babel-loader) ] } ] }
更多配置请查看: github.com/webpack-con…
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 的配置日趋简洁,何不尝试配置一下呢?