webpack 性能优化

webpack 性能优化大致可分为两方面：

1. 构建速度
2. 产出代码

构建速度优化

优化 babel-loader

 {test:/\.js$\,
  use: ['babel-loader?cacheDirectory'], // 开启缓存
  include:xxx, // 明确范围
  }

• include 明确范围
• exclude 排除范围

IgnorePlugin 避免引入无用模块

适用场景：moment 是一个非常常见的组件库，支持多语言，当我们引入所有语言之后，代码量过大（实际上用到的语言可能只有一两种），这时候可以采用 IgnorePlugin 来不引入.

plugins:[
    new webpack.IgnorePlugin(arg1,arg2) // 忽略 arg2 下面所有 arg1 目标
  ]

noParse 避免重复引入

moudle.exports = {
  moudle:{
    // 完整的 react.min.js 文件就没有采用模块化，无需重复打包
    noParse:[/react\.min\.js$/],// 忽略文件的递归解析处理
  }
}

• IgnorePlugin vs noParse
  • IgnorePlugin：直接不引入，代码里没有，可用来减少代码产出优化
  • noParse：引入，但不打包

happyPack 多进程打包

因为 JS 单线程，开启多进程打包，可以提高构建速度（尤其适用于多核 CPU）。

ParallelUglifyPlugin 多进程压缩 JS

只能在 Prod 环境下使用。
webpack 内置了 Uglify 工具压缩 JS ，与 happyPack 同理。

ParallelUglifyPlugin 做到的变量优化：

//优化前
let a =10;
let b = 20;
let c = a + b;

// 优化后
let c = 30；

关于开启多进程：

1. 项目较大，开启多进程可以提高速度；
2. 项目较小，开启多京城可能会降速（进程开销）；

热更新

新代码生效，页面状态不会丢失，网页不会刷新。

自动刷新

页面状态会丢失，网页会刷新。
watch:true; 默认为false

DllPlugin 动态链接库插件

同一版本之构建一次即可，不用每次都重新构建。
像 vue 和 react 比较稳定，不常升级，不需要每次重新构建；

1. DllPlugin：打包出 dll 文件
2. DllReferPlugin：适用 dll 文件

webpack 构建优化总结

能用于生产

1. 优化 babel-loader;
2. IgnorePlugin
3. noParse
4. happyPack
5. ParallerUglifyPlugin

不能用于生产

1. 自动刷新
2. 热更新
3. DllPlugin

产出代码优化

小图片 base64 编码

rules:[{
    test:/\.(png|jpg|jpeg|gif)$/,
    use:{
      loader:'url-loader',
      options:{
        // 小于 5KB 的图片适用 base64 格式产出
        // 否则，依然沿用 file-loader 的形式产出 url
        limit:5 * 1024,
        // 打包到 img 目录下
        outputPath:'/img',
        // 设置图片的 cdn 地址
        // publicPath:'/xx'
      }
    }
  }]

懒加载

 setTimeout(()=>{
    // res :资源
    import(xx).then(res=<res.default.xx)
  },200)

bandle+hash = filename

output:{
  // 有变化：hash 变化
  // 无变化：打包时 hash 不会变化，请求资源时直接命中缓存
  filename:'[name].[contectHash:8].js'
 }

IgnorePlugin

适用 CDN 加速

使用 production

• mode:‘production’
• 自动开启代码压缩
• React、Vue 会自动删除调试代码（eg:开发环境的 waring)
• 自动启动 tree-shaking：开启后，没有用到的代码不会被加载到，不进行打包；
• tree-shaking：只有 ES6 moudle（静态引入，编译时引用） 才生效，commonjs （动态引入。执行时引用）不生效；

scope Hosting

• 100 个函数分不到 100 个文件会很慢，100 个函数放到 1 个文件里会快很多，作用于更少；
• 代码体积更小；
• 创建函数作用域更少；
• 代码可读性更好；