本文内容如下
性能优化相关内容
如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案
性能优化两大方面
一,开发环境性能优化
优化: 构建速度,代码调试
- HMR热模块更新(代码调试)
- source-map(代码调试)
- oneOf(构建速度)
- 缓存 (构建速度)
- 多进程打包 (构建速度)
二,生产环境性能优化
优化: 减少请求,代码体积,加快请求速度
- 缓存(减少请求)
- 代码压缩(代码体积)
- tree-shaking摇树(代码体积)
- code-splitting代码分割(加快请求速度)
- lazy loading懒加载/预加载(加快请求速度)
- externals忽略打包 (代码体积)
- 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]_