webpack开发环境和生产环境性能优化
开发环境性能优化
1、优化打包构建速度
（1）HMR（热模块替换）
构建的时候如果只有一个模块变化，那么只构建这一个模块，其他模块用缓存，极大提升构建速度，体验更好
devServer:{
hot:true
}
html （一般只有一个模块，不需要处理，开启热模块后，会存在问题，需要在入口处，引入html文件
entry：[‘./src/index.js’,'./src/index.html']）
css（style-loader内部已经做了处理）
js（需要自己配置,不能对入口文件做处理）
//如果module.hot有这个属性，说明开启的热模块
if（module.hot）{
module.hot.accept('./**.js',function(){ //有几个模块，就写多少个，
//监听**.js文件，一旦发生变化，其他模块将不会重新打包
})
}
2、优化代码调试
(1)source-map
源代码和构建后代码的一种映射关系（如果构建代码出错了，可以映射追踪到源代码）
webpack.config.js配置
devtool：'source-map' (可选)
[inline-|hidden-|evel-][nosources][cheap-[module-]]source-map
外部和内联区别：外部生成了文件，内联没有，内联的构建速度更快
1.1 source-map:外部
错误代码准确信息和源代码的错误位置
1.2 inline-source-map 内联
只生成一个内连source-map
错误代码准确信息和源代码的错误位置
1.3 hidden-source-map 外部
错误代码错误原因，不能追踪到源代码错误，只能提示到构建后代码的错误位置
1.4 evel-source-map 内联
每一个文件都生成对应的source-map，都在evel
错误代码准确信息和源代码的错误位置
1.5 nosources-source-map 外部
错误代码的准确信息，但没有源代码信息
1.6 cheap-source-map 外部
错误代码的准确信息，但没有源代码信息
只能精确到行
1.7 cheap-module-source-map
错误代码的准确信息，但没有源代码信息
能精确到具体的某一列
开发环境一般要求速度快，调试更友好
速度快（evel>inline>cheap）
调试更友好（source-map checp-module-source-map cheap-source-map）一般使用 eval-source-map/checp-module-source-map
生产环境：源代码隐藏，体积小
内联会让代码体积变大，所以生产环境不用内联一般使用：source-map / checp-module-source-map
生产环境性能优化
1、优化打包构建速度
（1）oneof （使loader只执行一次，不能有两个配置同时处理一个文件）
(2) babel缓存
( 3）多进程打包（同一时间干多个事情，消耗时间比较长的）
(4) externals （让某些包不打包），直接不打包，后直接通过csdn引入就可以
externals：{
jquery:'jQuery' //拒绝jQuery被打包进来
}
（5）dll（让某些包不打包）
将库单独打包，先把这个库打包好，后面直接用
2、优化代码运行的性能
（1）文件资源缓存（修改的是输出的文件名称）（hash、chunkhash 、contenthash）
hash：每次webpack构建时都会生成唯一一个hash值
问题：文件内东西没有变，但还是重新打包了
chunkhash ：根据chunk生产hash，如果打包来源于同一个chunk，那么hash值就一样
问题：js和css值一样（因为css是被js引入的），所以同属于一个chunk
contenthash ：根据文件内容生成hash 不同文件hash值一定不一样
（3）tree-shaking 去除应用程序中没有使用到的代码
前提：1、必须使用es6模块，2、开启produceion环境
在package.json中配置
“sideEffects”：false 所有代码都没有副作用（都可以进行tree shaking）
问题：可能会把css /@babel/polyfill（副作用）文件干掉
“sideEffects”：["*.css"]
（4 ）代码分割
4.1 单入口
4.2多入口
(5)懒加载/预加载（代码是在异步运行的）
懒加载：文件需要使用的时候才加载
预加载prefetch：使用之前，提前加载js文件（等其他资源加载完毕了，浏览器空闲了，在偷偷加载资源，但存在兼容性问题）
document.getElementById('btn').onchick = function(){
import(/*webpackChunkName:''test*,webpackPrefetch:true/ '.test').then(()=>{
......
)}
5）PWA（离线可访问技术）
配置
//webpack.config.js
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
plugins:[
new MiniCssExtractPlugin({
filename:'css/style.[contenthash:10].css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new htmlWebpackPlugin({
filename:'index.html',
template:'./public/index.html',
minify:{//压缩html
collapseWhitespace:true,
removeComments:true
}
}),
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim:true,//帮助service-worker快速启动
skipWaiting:true //删除旧的service-worker
//生成service-workder.js
})
]
//入口文件
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./service-worker.js').then(() => {
console.log('service注册成功了～');
}).catch(() => {
console.log('service注册失败了～');
});
});
}
注意
eslint不认识window、navigator全局变量
解决：修改package。json中eslintconfig配置
"env":{
"browser":true
}
本文地址：https://blog.csdn.net/weixin_42038290/article/details/111146909