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

happypack

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自带优化

tree-shaking

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

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

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

scope hosting 做用域提高

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

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

打包后的代码直接是：

console.log(6)