webpack优化篇（四十三）：多进程/多实例构建：资源并行解析可选方案

Posted 2022-08-22 凯小默

说明

玩转 webpack 学习笔记

可选方案

• thread-loader
• parallel-webpack
• HappyPack

使用 HappyPack 解析资源

原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中

代码示例：

exports.plugins = [
	new HappyPack(
		id: 'jsx',
		threads: 4,
		loaders: ['babel-loader']
	)，
	new HappyPack(
		id: 'styles',
		threads: 2,
		loaders: ['style-loader', 'css-loader', 'less-loader']
	)
]

HappyPack 工作流程：

使用 thread-loader 解析资源

原理：每次 webpack 解析一个模块，threadloader 会将它及它的依赖分配给 worker 线程中

module.exports = smp.wrap(
	entry: entry,
	output: 
		path: path.join(_ dirname, 'dist'),
		filename: '[name ]_[chunkhash:8].js'
	，
	mode: 'production',
	module: 
		rules: [
			
				test: /.js$/,
				use: [
					
						loader: ' thread- loader',
						options: 
							workers: 3
						
					,
					' babel- loader',
					// 'eslint- loader'
				]
			,
		]
	

实战使用 happypack

https://github.com/amireh/happypack

安装

npm install --save-dev happypack

在使用之前我们先增加一些页面，提升效果更明显

然后在运行打包命令 npm run build

接下来使用 happypack

const HappyPack = require('happypack');
exports.module = 
  rules: [
    
      test: /.js$/,
      // 1) replace your original list of loaders with "happypack/loader":
      // loaders: [ 'babel-loader?presets[]=es2015' ],
      use: 'happypack/loader',
      include: [ /* ... */ ],
      exclude: [ /* ... */ ]
    
  ]
;

exports.plugins = [
  // 2) create the plugin:
  new HappyPack(
    // 3) re-add the loaders you replaced above in #1:
    loaders: ['babel-loader']
  )
];

然后在运行打包命令 npm run build，我们可以看到有 3 个线程

可以看到时间有了明显的下降

实战使用 thread-loader

注释掉 happypack 的代码，安装依赖：https://github.com/webpack-contrib/thread-loader

npm install --save-dev thread-loader

use: [
    
        loader: 'thread-loader',
        options: 
            workers: 3
        
    ,
    'babel-loader',
    // 'happypack/loader',
    // 'eslint-loader'
]

然后在运行打包命令 npm run build，我们发现时间也有了明显的下降，