webpack学习（2）性能优化

1. 性能优化
   • 开发环境性能优化：优化打包构建速度；优化代码调试。
   • 生产环境性能优化：优化打包构建速度；优化代码运行性能。
2. devServer配置，可以让开发环境自动化。也算开发环境优化

devServer:{
   contentBase:resolve(__dirname, 'build'),//项目构建后路径
  //压缩
  compress:true,
  open:true,//自动打开浏览器
  port:8080,//指定端口
}

3. HMR：hot module replacement热模块替换（比如我们修改了一个css文件，但是我们会发现整个都被重新打包了一遍，帮我们提升构建速度）

devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true,
// 开启 HMR 功能
// 当修改了 webpack 配置，新配置要想生效，必须重新 webpack 服务
hot: true
}

①：样式文件:style-loader内部已经实现了HRM功能，所以不用操心。
②：js文件
③：html文件：默认不使用HRM功能

image.png

4. source-map:提供一种源代码到构建后代码的映射技术，通过映射可以追踪到代码错误。

//另外一个配置项
devtool: 'eval-source-map'

image.png

开发默认:eval-source-map
生产环境:source-map(如果需要隐藏源代码，nosource-source-map)

5. 生产环境的优化

• oneOf：rules里面有很多的loader,如果不做优化，一个文件就会被所有的loader过一遍。这样就不是很好。oneOf表示以下规则只会匹配一个。提高生产打包构建速度。
• 缓存
  ①：babel缓存：有点类似于开发环境配置的HMR,但是生产环境无法使用HMR,因为它是基于devServer的，就比如修改了一个js文件，并不需要再把所有的js文件都转化一遍。

开启 babel 缓存(写在babel-loader的规则里面)
第二次构建时，会读取之前的缓存（作用：让第二次打包构建速度更快）
cacheDirectory: true

②：文件缓存：文件名+hash(面)作用：线上代码运行缓存更好使用，性能优化

• hash值，强缓存模式下，这样如果发现资源不一样，就回去服务器从新获取资源。每次webpack打包都会生成一个hash值，问题：因为文件都使用同一个hash值，如果从新打包会导致缓存失效。（可能我只改了一个文件）。

image.png

• tree shaking ：作用：去除无用代码，减小代码体积。

  

  image.png

• code split代码分割（一个chunk分割成多个，可以实现多个并行加载和按需加载）
  做法：①根据入口文件代码分割

  

  image.png

  ②：配置项

  

  image.png

  ③：通过动态import引入，会单独打包成一个chunk

  

  image.png

• 懒加载和预加载

  

  image.png

• 多进程打包(thread-loader)默认开启cpu的核数-1，也可以自行配置，处理js(代码比较多的时候使用，不要滥用)，提高打包构建速度。

  ，

  

  image.png

• externals(忽略一些包的打包，使用cdn引入，减小体积)

  

  image.png
• dll: 使用代码分割会把我们的node_modules默认打包成为一个chunk,使用dll,对某些库单独打包，还是需要通过插件引入html中。和externals的区别是不需要打包，使用cdn链接引入。dll是单独打包一次，不参与后续打包，然后需要引入。
• webpack-bundle-analyzer: webpack分析工具插件

【信息由网络或者个人提供，如有涉及版权请联系COOY资源网邮箱处理】