webpack性能优化

1. 开发环境性能优化

1.1 优化打包构建速度

1.1.1 HMR

https://www.cnblogs.com/PHY01/p/15654771.html

1.2 优化代码调试

1.2.1 source-map

https://www.cnblogs.com/PHY01/p/15654780.html

2. 生产环境性能优化

2.1 优化打包构建速度

2.1.1 oneOf

优化生产环境打包速度

rules: [{
  //以下loader只会匹配一个 注意：不能有两个配置处理同一类型文件
  {
    test:/\/,
    use:['xxx-loader']
  }
  oneOf: [
      //如果需要多个配置处理同一类型文件，按照配置执行的先后顺序，将排前面执行loader，放在与oneOf平级的上方。
      {},
      {}
  ]
}]

2.1.2 babel缓存

让第二次打包构建速度更快

babel的使用：https://www.cnblogs.com/PHY01/p/15628575.html

1. 添加配置项

   //第二次构建时，会读取之前的缓存
   options:{
       cacheDirectory:true
   }
   

2. 启动服务

/* 
服务器代码
启动服务器指令：
nodemon
node server.js
访问：
localhost:3000
*/

const express = require('express')
const app = express()

app.use(express.static('build',{maxAge:1000*3600}))
app.listen(3000)

2.1.3 多线程打包

https://www.cnblogs.com/PHY01/p/15654899.html

2.1.4 externals

外部扩展

使用：

1. webpack.config.js中与entry平级

   entry:'src/js/index.js',
   ......
   externals:{ //拒绝jQuery被打包
       jquery:'jQuery'  //jQuery包名
   }
   

2. 在index.html文件中需要引入jQuery的CDN链接，才能使用jquery。

2.1.5 dll

https://www.cnblogs.com/PHY01/p/15654818.html

2.2 优化代码运行的性能

2.2.1 文件资源缓存（hash，chunkhash，contenthash）

判断三者的区别，要开启服务，见babel缓存第二点

hash：每次webpack构建时，会产生一个唯一的hash值，js和css同时使用一个hash值，如果重新打包，会导致所有缓存失效（即使只修改了js或css中某一文件的内容，资源都会重新加载，network可见）

chunkhash：根据chunk生成的hash值，如果打包来自于同一个chunk，那么hash值就一样。css与js被引入至同一个入口文件，所以属于同一个chunk（即使只修改了js或css中某一文件的内容，资源都会重新加载，network可见）

contenthash：根据文件的内容生成hash值，不同文件的hash值不一样，缓存中某一文件被修改，只会重新加载该文件，不会影响其他缓存的文件。

2.2.2 tree shaking

构建代码时，去除无用代码，减少代码体积

前提：

1）必须使用ES6模块化

2）开启production环境

package.json中配置：

"sideEffects":["*.css"] //配置所有的css文件不进行tree shaking

2.2.3 code split

https://www.cnblogs.com/PHY01/p/15654825.html

2.2.4 懒加载/预加载

https://www.cnblogs.com/PHY01/p/15654832.html

2.2.5 pwa

https://www.cnblogs.com/PHY01/p/15654838.html