本文由云 + 社区发表
构建
影响前端发布速度的有两个方面, 一个是构建, 一个就是压缩, 把这两个东西优化起来, 可以减少很多发布的时间.
thread-loader
https://github.com/webpack-contrib/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
https://github.com/amireh/happypack , 通过多进程模型, 来加速代码构建. 从 GitHub 的 starts 数量来看, happypack 使用的人数比较多, 比较受欢迎.
原理
- 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
- })
- ]
- const TerserPlugin = require('terser-webpack-plugin');
- module.exports = {
- optimization: {
- minimizer: [new TerserPlugin(
- parallel: true // 多线程
- )],
- },
- };
来源: https://www.cnblogs.com/qcloud1001/p/10529300.html