- 性能优化
- 开发环境性能优化：优化打包构建速度；优化代码调试。
- 生产环境性能优化：优化打包构建速度；优化代码运行性能。
- devServer配置，可以让开发环境自动化。也算开发环境优化
devServer:{
contentBase:resolve(__dirname, 'build'),//项目构建后路径
//压缩
compress:true,
open:true,//自动打开浏览器
port:8080,//指定端口
}
- 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
- source-map:提供一种源代码到构建后代码的映射技术，通过映射可以追踪到代码错误。
//另外一个配置项
devtool: 'eval-source-map'
image.png
开发默认:eval-source-map
生产环境:source-map(如果需要隐藏源代码，nosource-source-map)
- 生产环境的优化
- 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分析工具插件
网友评论