性能优化介绍
开发环境性能优化
生产环境性能优化
- 优化打包构建速度（与开发环境的优化角度不一样）
- 优化代码运行的性能
开发环境性能优化
HMR（hot module replacement）
HMR 被称为 模块热替换/热模块替换。
作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度
使用：在 devServer 中配置如下
devServer:{
contentBase:resolve(__dirname,'build'),
compress:true,
port:3000,
open:true,
// 开启 HMR 功能
// 当修改了 webpack 配置，必须重新执行 npx webpack-dev-server
hot:true
}
文件分为以下三种文件：
样式文件：可以使用 HMR 功能，因为 style-loader 内部实现了
JS文件：默认不能使用 HMR 功能 —> 需要修改JS代码，添加支持 HMR 功能的代码
注意：HMR 功能对JS的处理，只能处理非入口JS文件的其他文件
HTML文件：默认不能使用 HMR 功能，同时会导致问题：HTML 文件不能热更新了（不用做 HMR 功能，因为 HTML 文件只有一个，一旦改变，只有它自己变）
解决：修改 entry 入口，将 HTML 文件引入
JS文件添加支持 HMR 功能的代码如下：
只能在入口JS文件中添加,假设文件名叫 print.js
import print from './print.js'
if(module.hot){
// 一旦 module.hot 为 true，说明开启了 HMR 功能。 ---> 让 HMR 功能代码生效
module.hot.accept('./print.js',()=>{
// 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
// 会执行后面的回调函数
print()
})
}
开发环境下调试代码（source-map）
source-map:一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码错误）。
它在index.js中声明一下就可以了，如下：
devtool:'source-map'
它会有一些参数：
source-map:外部
错误代码准确信息和源代码的错误位置
inline-source-map:内联
只生成一个内联source-map
hidden-source-map:外部
错误代码错误原因，但是没有错误位置。不能追踪源代码错误，只能提示到构建后代码的错误位置
eval-source-map:内联
每一个文件都生产对应的source-map，都在eval
错误代码准确信息和源代码的错误位置
nosources-source-map:外部
错误代码准确信息，但是没有任何源代码信息
cheap-source-map:外部
错误代码准确信息和源代码的错误位置
只能精确到行
cheap-module-source-map:外部
错误代码准确信息，但是没有任何源代码信息
module会将loader的source-map加入
内联和外部的区别：1.外部生产了文件，内联没有
2.内联构建速度更快
使用场景：
开发环境：速度快，调试更友好
速度快(eval>inline>cheap>…)
eval-cheap-source-map
eval-source-map
调试更友好
source-map
cheap-module-source-map
cheap-source-map
vue 和 react脚手架默认使用的 eval-source-map
生产环境：源代码要不要隐藏？调试要不要更友好？
内联会让代码体积变大，所以在生产环境不用内联
nosources-source-map 全部隐藏
hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
一般使用 source-map / cheap-module-source-map
oneOf
oneOf 中的 loader 只会匹配一个，提高 loader 的处理性能
注意：不能有两个配置处理同一种类型的文件
使用方法：
module.exports = {
rules:[
{
oneOf:[
// 这里面配置loader，不能有2个loader处理同一种文件
]
}
]
}
缓存
- babel 缓存
让第二次打包构建速度更快
在配置 babel-loader 的配置选项中添加如下配置就行：
// 开启 babel 缓存
// 第二次构建时，会读取之前的缓存
cacheDirectory:true
-
文件资源缓存
让代码上线运行缓存更好使用
hash：每次 webpack 构建时会生成一个唯一的 hash 值。
问题：因为js和css同时使用一个hash值，如果重新打包，会导致所有缓存失效。（可能我只改动了一个文件）
解决：chunkhash 根据chunk生产的hash值。如果打包来源于同一个chunk，那么hash值就一样。
问题：js和css的hash值还是一样的，因为css是在js中被引入的，所以同属于一个chunk。
解决：contentchunk 根据文件的内容生成hash值。不同文件hash值一定不一样
使用方法：在文件名里加hash值
// 如这样使用：
filename:'css/built.[contenthash:10].css',
tree shaking(去除无用代码)
前提：1.必须使用ES6模块化 2.开启 production 环境
作用：减少代码体积
在package.json中配置
"sideEffects": false // 所有代码都没有副作用（都可以进行tree shaking）
// 问题：可能会把 css/ @babel / polyfill (副作用)文件干掉
// 解决：
"sideEffects":["*.css"]
code split(代码分割)
单页面一般配置单入口
多页面一般配置多入口
第一种配置：
// 单入口
entry:'./src/js/index.js'
// 多入口：有一个入口，最终输出就有一个 bundle
entry:{
index:'./src/js/index.js',
test:'./src/js/test.js'
}
output:{
// [name]:取文件名
filename:'js/[name].[contenthash:10].js'
}
第二种：
多入口优化设置，在 webpack.config.js 中配置：
// 1.可以将 node_modules 中代码单独打包一个chunk最终输出
// 2.自动分析多入口 chunk 中，有没有公共的文件。如果有会打包成单独一个chunk
optimization:{
splitChunks:{
chunks:'all'
}
}
第三种:常用于单页面，并行加载，加载速度更快
通过js代码，让某个文件被单独打包成一个chunk
// import 动态导入语法：能将某个文件单独打包
import(/* webpackChunkName:'test' */'./test').then((result)=>{
console.log(result)
}).catch(()=>{
console.log('文件加载失败~')
})
懒加载和预加载
懒加载：当文件需要使用时才加载~
例：
// 在HTML文件中添加一个按钮
<button id="btn">点我</button>
// 在index.js入口文件中设置如下代码实现懒加载：
document.getElementById('btn').onclick = function(){
import('./test').then((result)=>{
console.log(result)
})
}
只有当点击按钮时才加载 test.js 文件，实现了文件的懒加载
预加载 prefetch：会在使用前，提前加载js文件，兼容性较差
正常加载可以认为是并行加载（同一时间加载多个文件），预加载是等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
实现代码如下：
// 在HTML文件中添加一个按钮
<button id="btn">点我</button>
// 在index.js入口文件中设置如下代码实现预加载：webpackPrefetch:true
document.getElementById('btn').onclick = function(){
import(/* webpackChunkName:'test',webpackPrefetch:true */'./test').then((result)=>{
console.log(result)
})
}
PWA（渐进式网络开发应用程序：离线可访问）
需要用到 workbox 这个插件，先下载
npm i workbox-webpack-plugin
// 引入
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
使用：在 plugins 数组中直接配置
/*
1.帮助 serviceworker 快速启动
2.删除旧的 serviceworker
生产一个 serviceworker 配置文件~
*/
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim:true,
skipWaiting:true
})
在入口文件 index.js 中注册 serviceworker，还要处理兼容性问题
/*
1.eslint 不认识 window、navigator 等全局变量
解决：需要修改 package.json 中eslintConfig 配置
"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').then(()=>{
console.log('sw注册成功~')
}).catch(()=>{
console.log('sw注册失败了~')
})
})
}
多进程打包
使用 thread-loader 开启多进程打包。
进程启动大概为 600ms，进程通信也有开销，只有工作消耗时间比较长，才需要多进程打包，开启需要如下配置：
{
loader:'thread-loader',
options:{
workers:2 // 2个进程
}
}
externals
在 webpack.config.js 中配置
externals:{
// 拒绝jQuery被打包进来
jquery:'jQuery'
}
作用：能用cdn在HTML文件中引入的，可以配置一下externals，可以提高打包速度。
dll
将库文件提前打包好，然后引入，
与externals不同在于，externals直接不打包
缺点是配置比较多
