webpack性能优化
- 开发环境性能优化
- 生产环境性能优化
HMR（hot module replacement 热模替换）
作用：一个模块发生变化，只会重新加载变化了的模块。提升构建速度。
使用方式：在devServer中添加hot属性为true。
注意：
css文件可以，因为style-loader内部实现了
js文件默认不支持 （注意：不可以对入口文件进行HMR）
处理方式如下
if (module.hot){
// 一旦module.hot为true，则表示开始了HMR功能。
module.hot.accept('./print.js',()=>{
// 方法会监听print.js文件的变化，一旦发生变化，其他js模块不会重新打包构建。
// 会执行后面的回调函数
print();
})
}
html文件，默认不支持。解决方法: 修改
entry入口，将html文件引入。(不需要HMR)
- 优化代码调试
source-map
- 这是一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪到源代码错误）
// webpack.config.js 配置如👇
devtool:'inline-source-map'
source-map 外部
// 错误代码准确信息 和 源代码的错误位置
inline-source-map 内联
// 只生成一个内联的source-map
// 错误代码准确信息 和 源代码的错误位置
hide-source-map 外部
// 错误代码准确信息，但是没有错误位置
// 不能追踪代码错误，只能提示到构建后代码的位置
eval-source-map 内联
// 每一个文件都生成对应的source-map , 都在eval
// 错误代码准确信息 和 源代码的错误位置
nosource-source-map 外部
// 错误代码准确信息 但是没有任何源代码信息
cheap-source-map 外部
// 错误代码准确信息 和 源代码的错误位置
// 只能精确到行
cheap-module-source-map 外部
// 错误代码准确信息 和 源代码的错误位置
// 会将loader的source map 加入
总结如下:
- 内联和外部的区别: 1. 外部会生成文件，内联不会 2. 内联构建速度更快
- 开发环境使用 ： eval-source-map
- 生产环境使用 : source-map
oneOf
- 在rules中配置， 指定该oneOf中的loader不会重复匹配。
module:{
rules:[
{
test:/\.js$/,
loader:'xxx'
}
{
oneOf:[
{test:xxx,
loader:'xxx'}
]
}
]
}
缓存
babel缓存
- cacheDirectory:true
---> 让第二次打包构建速度更快
文件资源缓存
hash : 每次webpack构建时都会生成一个唯一的hash值。
问题：因为js和css使用同一个hash值，如果重新打包会导致所有缓存失效。(可能只改动了一个文件)
chunkhash: 根据chunk生成的hash值，如果打包源来自同一个chunk，那么hash值就一样
问题：js和css的hash还是一样的，因为js中引入了css，所以同属一个chunk
contenthash：根据content生成的hash值，不同文件的hash值一定不一样。
---> 让代码上线更好使用缓存
tree shaking
- tree shaking 去除无用代码
- 前提 : 1.使用es6模块化 2.开启production环境
- 作用：减少代码体积
- 副作用：可能会把css资源当成无用代码，解决方法：在package.json中配置：
"sideEffects":["*.css"],sideEffects中的所有文件都不会进行tree shaking了
code split
方式1： 配置多入口 entry:{index:'index.js',test:'test:test.js'}
方式2： 配置optimization
// 作用：
// 1.将node_modules中的代码单独打包成一个chunk输出
// 2.不会重复打包公共文件，会单独打包成一个独立的chunk，实现共用(多入口才会进行此分析)。
optimization:{
splitChunks:{
chunks:'all'
}
}
方式3：通过js的方式，动态导入语法，将某个文件单独打包。
// 此时test就会被单独打包成一个chunk
import( /* webpackChunkName:'tets' */'./test').then(res=>{}).catch()
懒加载和预加载
- 懒加载：触发到某个条件后才加载
import(/*webpackChunkName: 'test' */'test.js')
.then(({xxx,xxx})=> {使用})
.catch(()=>{拦截错误})
- 预加载 : （ webpackPrefetch:true 慎用），当浏览器空闲的时候开始加载，优化读取时的速度。
import(/*webpackChunkName: 'test' , webpackPrefetch:true */'test.js')
.then(({xxx,xxx})=> {使用})
.catch(()=>{拦截错误})
PWA离线可访问技术
- workbox ---> workbox-webpack-plugin
- 在webpack.config.js中配置plugins
// PWA核心技術
new workboxWebpackPlugin.GenerateSW({
/*
1. 快速啟動serviceworker
2. 刪除旧的serviceworker
生成一个serviceworkder配置文件。
*/
clientsClaim:true,
skipWaiting:true
})
- 在入口文件中
// 注册serviceWorker
// 处理兼容问题
/**
* 1. eslint不认识window navigator等全局变量 所以需要在package.json配置
* "env":{
"browser":true
}
2. serviceWorker代码必须运行在服务器上
- nodejs
- npm i serve -g
serve -s build 启动服务服务器,将build目录下所有资源作为静态资源暴露出去
*/
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js') // 该文件由 workbox-webpack-plugin 生成
.then(() => {
console.log('ws注册成功');
})
.catch(() => {
console.log('ws注册失败');
});
});
}
多进程打包
- 使用
thread-loader，实现多进程打包。(对loader使用，放在loader之后，编写顺序如下) - 开启多进程打包大概为600ms，进程通信也有开销。只有打包时间过长才需要多进程打包。
{
loader:"thread-loader",
options:{
workers:2 // 2个进程
}
},
{
loader:"babel-loader",
options:{
some code...
}
}
externals
- 将文件忽略。不参与打包。
👇 webpack.config.js
mode:"",
externals:{
// 拒绝jQuery参与打包
// 库名 ：包名
jquery:'jQuery'
}
dll
- 将不同的库分成不同的chunk打包，更利于性能优化。
-
webpack --config webpack.dll.js表示将webpack的配置文件改为webapck.dll.js
开发环境性能优化
优化打包构建速度
优化代码调试
生产环境性能优化
优化打包构建速度
- oneOf
- babel缓存
- externals 将文件忽略。不参与打包。
- dll 将不同的库分成不同的chunk打包，更利于性能优化。
优化代码性能
- 缓存(hash | chunkhash | contenthash)
- tree shaking( 删除无用代码 ) ，前提：production环境,以及ES6模块化。
- code split (代码拆分)
- 懒加载 / 预加载
- pwa 离线可访问技术
