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