webpack打包速度优化之多进程解析

最新推荐文章于 2024-08-23 07:58:17 发布

信海利世

最新推荐文章于 2024-08-23 07:58:17 发布

阅读量434

点赞数

分类专栏： webpack 文章标签：多进程 webpack 前端

本文链接：https://blog.csdn.net/liixnhai/article/details/108702785

版权

webpack 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1、多进程/多实例构建：

资源并行解析可选方案
可选thread-loader或者 HappyPack或者parallel-webpack

2、多进程/多实例：

使用 HappyPack 解析资源

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


const HappyPack = require('happypack');
{
module: {
  rules: [
  {
  test: /.js$/,
  //include: path.resolve('src'),
  use: [
  // {
  // loader: 'thread-loader',
  // options: {
  // workers: 3
  // }
  // },
  // 'cache-loader',
  // 'babel-loader',
  'happypack/loader'
  // 'eslint-loader'
  ]
  },
  ]
},

plugins: [
  new Happy1Pack({
  // 3) re-add the loaders you replaced above in #1:
  loaders: [ 'babel-loader?cacheDirectory=true' ]
  }),
]
}

3、多进程/多实例：使用 thread-loader 解析资源

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

module: {
rules: [
{
test: /.js$/,
//include: path.resolve('src'),
use: [
{
loader: 'thread-loader',
options: {
workers: 3
}
},

'babel-loader',

'eslint-loader'
]
},