webpack4学习笔记优化部分happypack与webpack自带优化

jiezi

5 年前

happypack 可利用多线程对文件进行打包 (默认 cpu 核数 -1)，对多核 cpu 利用率更高。
new Happypack(options) 可生成对应的 loader, 如配置：

new Happypack({
   id: 'js',
   use: [{
     loader: 'babel-loader',
     options: {cacheDirectory: true}
   }]
 }),
 new Happypack({其他 loader 配置})

在 js 的 loader 中配置:

use:[{
   loader: 'Happypack/loader',
   options: {id: 'js'}
}],

则 js 的打包可利用多线程。
注意，项目较小时，多线程打包反而会使打包速度变慢。
* 注：关于多线程打包，老版本 webpack 利用 webpack.optimize.UglifyJsPlugin 进行文件压缩，此插件为单线程，可利用 ParallelUglifyPlugin 插件实现多线程压缩 *

拿一个老项目测试 happypack 时发现一个的问题，module.rules.use 本该传入一个 [array], 但传入{object} 也不会报错，但打包速度差别很大

代码 1：

use:[{
  loader: 'babel-loader',
  options: {cacheDirectory: true}
}],

代码 2：

use:{
  loader: 'babel-loader',
  options: {cacheDirectory: true}
},

同一个项目，代码 1 配置比代码 2 配置快了十几秒，官方文档上也没找到原因。。

webpack 生产环境会自动删除未使用的代码，如：


import math from 'xx'
math.add(1,2)

生产环境下，打包后的代码中, 将不会打包除 add 以外的 math 方法。
注意，此项只对 import 生效，若直接是 const math=require(‘xx’).default, 还是会打包 math 中的所有内容。

webpack 打包时会自动省略可以简化的部分，如：

let a=1,b=2,c=3
let d=a+b+c
console.log(d)

打包后的代码直接是：

console.log(6)

webpack4学习笔记优化部分happypack与webpack自带优化

happypack

webpack 自带优化

tree-shaking

scope hosting 作用域提升