webpack学习：性能优化

本文内容如下

性能优化相关内容

如果你都有了答案，可以忽略本文章，或去webpack学习导图寻找更多答案

---

性能优化两大方面

一，开发环境性能优化

优化： 构建速度，代码调试

1. HMR热模块更新（代码调试）
2. source-map（代码调试）
3. oneOf（构建速度）
4. 缓存 （构建速度）
5. 多进程打包 （构建速度）

二，生产环境性能优化

优化： 减少请求，代码体积，加快请求速度

1. 缓存（减少请求）
2. 代码压缩（代码体积）
3. tree-shaking摇树（代码体积）
4. code-splitting代码分割（加快请求速度）
5. lazy loading懒加载/预加载（加快请求速度）
6. externals忽略打包 （代码体积）
7. dll动态链接库（构建速度）

---

开发环境性能优化

HMR热模块替换

Hot module replacement

前景问题：有100个模块，只更新其中一个，其他99个也跟着更新，浪费资源

热更新：新代码生效，网页不刷新，状态不丢失
自动刷新：整个网页全部刷新，速度较慢，状态会丢失

css文件： 可以使用HMR，因为style-loader内部实现了
js文件： 不能使用HMR，需要监听执行函数，只能监听非入口文件
html文件：不能使用HMR，不需要HMR，因为只有一个html文件

1.在devServer加上这两个属性
devServer:{
    
    hot:ture,
    hotOnly:ture
    //hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，
    前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
}
2.引入webpack
const webpack = require('webpack')
3.在插件加上new webpack.HashedModuleIdsPlugin()


//JS热更新：需要监听，在文件逻辑页面写
//一旦module.hot为true，说明开启了HMR功能，让HMR功能生效
if(module.hot){
   
    module.hot.accept('./a', () => {
    
        console.log(有更新就执行回调)
    })
}

---

sourceMap

源代码与打包后的代码映射关系

作用：可以快速查找代码错误，有错会报错，定位到源代码的错误地点

类型：string

//关闭配置
devtool:"none"

//推荐配置组合：生产环境无需设置
devtool:"cheap-module-source-map" //开发环境配置

//每个关键字代表的含义
source-map：代码映射，但打包会慢，需要配置其他关键字
eval：打包速度最快的一种方式，执行效率最快，性能最好的一种打包方式。
cheap: 只监视入口文件的业务代码和打包后的js代码的准确性。
module: 不仅监视业务逻辑的错误，还会监视入口文件中引入的第三方模块以及一些loader的代码错误。

---

oneOf

问题：默认会执行一次所有的loader
解决：所有loader如果遇到能一个处理的，就不会再继续走下面的loader
注意：不能有两个配置处理同一种类型文件，要放在oneOf外面

module = {
   
   relus:[
        {
   
            eslint
        },
        {
   
           oneOf:[
           		{
   
                 	test:'',
    	 			use:{
   }        	
    	 		}
           ]
		}     	
   ]
},

---

缓存

问题：如果文件有100个，而只修改1个，这样任然需要打包100个
解决：缓存

babel缓存：

开启后，将第一次打包的结果缓存起来，检测与转换，开启babel缓存更有利于处理JS文件

{
   
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: [{
   
        loader: 'babel-loader',
        options: {
   
            cacheDirectory: true //开启babel缓存
        }
    }]
},

文件资源缓存：

问题：后台服务器会给文件做强缓存，不加hash，用户使用的是强缓存，更新不了文件

解决：给文件名加hash，浏览器会帮更新文件，因为名字改变了

1.加hash：每次webpack构建时会生成一个唯一的hash值
[name]_[hash:8].js
问题：js和css同时使用一个hash值，如果只更改了其中一个文件，
会使另外一个文件缓存失效，导致不必要的更新

2.加chunkhash：多个文件的统一出口文件
[name]_[chunkhash:8].js
问题：js和css同时使用一个hash值，因为css是在jS中引入的，属于同一个chunk

3.加cententhash：cententhash会根据文件内容的变化而改变hash，不同的内容会生成不同的hash
[name]_