webpack优化非常有必要使用webpack打包都绕不开webpack优化的话题，不管是面试还是实际开发，优化都是很重要的，毕竟提升用户体验是我们前端工程师的职责.构建时间优化首先是优化构建时间。Thread-loader多进程封装可以大大提高构建速度。使用方法是将thread-loader放在比较耗时的loader之前，比如babel-loader由于启动项目和打包项目都需要加速，所以配置在webpack.base.jsnpmithread-loader-D//webpack.base.js{test:/\.js$/,use:['thread-loader','babel-loader'],}}cache-loader缓存资源，提高二次构建速度。使用方法是把cache-loader放在耗时加载器之前，比如babel-loader因为启动项目和打包项目都需要加速，所以配置在webpack.base中。jsnpmicache-loader-D//webpack.base.js{test:/\.js$/,use:['cache-loader','thread-loader','babel-loader'],},开启热更新比如修改项目中的某个文件，会导致整个项目都刷新，非常耗时。如果只刷新修改后的模块，其他保持原样，会大大增加修改后代码的重建时间。只在开发中使用，所以在webpack.dev.js中引入配置//webpack.dev.js//webpackconstwebpack=require('webpack');//使用webpack提供的热更新插件plugins：[newwebpack.HotModuleReplacementPlugin()],//最后需要在我们的devserver中配置devServer:{+hot:true},exclude&includeexclude:不需要处理的文件include:文件需要处理的合理设置这两个属性，可以大大提高构建速度。在webpack.base.js中配置//webpack.base.js{test:/\.js$/,//使用include指定编译文件夹include:path.resolve(__dirname,'../src'),//useexclude排除指定文件夹exclude:/node_modules/,use:['babel-loader']},不同环境搭建，不同环境搭建很重要。我们在开发环境的时候需要清楚知道哪些配置是我们需要的，哪些是不需要的；而最后打包生产环境的时候，需要哪些配置，哪些配置不需要：开发环境：去除代码压缩、gzip、体积分析等优化配置，大大提高构建速度生产环境：需要代码压缩、gzip、体积分析等优化配置，大大降低最终项目的打包体积，提高webpack版本webpack版本越新，打包效果越好。打包体积优化主要是对打包项目的整体体积进行优化，有利于提升项目上线后的页面加载速度。本项目已经是webpack最新版CSS代码压缩CSS代码压缩使用css-minimizer-webpack-plugin，效果包括压缩，去重代码压缩比较耗时，所以只在打包项目的时候使用，所以只需要在webpack中。在prod.js中配置npmicss-minimizer-webpack-plugin-D//webpack.prod.jsconstCssMinimizerPlugin=require('css-minimizer-webpack-plugin')optimization:{minimizer:[newCssMinimizerPlugin(),//去重压缩css],}JS代码压缩JS代码压缩使用terser-webpack-plugin实现JS代码打包后压缩后代码的压缩对比Time-耗时，所以只在打包项目时使用，所以只需要在webpack.prod.js中配置npmiterser-webpack-plugin-D//webpack.prod.jsconstTerserPlugin=require('terser-webpack-plugin')optimization:{minimizer:[newCssMinimizerPlugin(),//去重压缩cssnewTerserPlugin({//压缩JS代码terserOptions:{compress:{drop_console:true,//移除控制台},},}),//压缩JavaScript],}tree-shakingtree-shaking简单的说就是动作：只打包用到的代码，不打包没用到的代码，而且webpack5默认开启tree-shaking，当打包时，生产方式为production,tree-shaking自动开启优化module.exports={mode:'production'}source-maptypesource-mapis用于：方便你在报错的时候定位到错误码所在的位置。它的大小不容小觑，因此需要针对不同的环境设置不同的类型。在开发开发环境的时候，我们需要能够准确定位错误代码的位置//webpack.dev.jsmodule.exports={mode:'development',devtool:'eval-cheap-module-source-map'}productionenvironmentproduction环境，我们要开源map，但是又不想体积太大，可以改成type//webpack.prod.jsmodule.exports={mode:'production',devtool:'nosources-source-map'}Bundle体积分析使用webpack-bundle-analyzer查看打包后的体积分布，然后进行相应的体积优化。打包的时候只需要看体积，所以只需要在webpack.prod.js中添加配置npmiwebpack-bundle-analyzer-D//webpack.prod.jsconst{BundleAnalyzerPlugin}=require('webpack-bundle-analyzer')plugins:[newBundleAnalyzerPlugin(),]用户体验优化模块懒加载如果没有模块懒加载，最后会把整个项目代码打包成一个js文件。单个js文件的体积非常大，所以当用户请求一个网页时，首屏的加载时间会比较长。使用模块懒加载后，将大js文件拆分成多个小js文件，在网页加载时按需加载，大大提高首屏加载速度//src/router/index.jsconstroutes=[{path:'/login',name:'login',component:login},{path:'/home',name:'home',//延迟加载组件:()=>import('../views/home/home.vue'),},]Gzip启用Gzip后，用户的页面加载速度大大提高，因为gzip的体积比原文件小很多，当然需要配合后端。使用compression-webpack-plugin只需要在打包的时候优化体积，所以只需要在webpack.prod.js中配置npmicompression-webpack-plugin-D//webpack.prod.jsconstCompressionPlugin=require('compression-webpack-plugin')plugins:[//代码前...//gzipnewCompressionPlugin({algorithm:'gzip',threshold:10240,minRatio:0.8})]小图片转base64给一些小图片可转base64，减少用户http网络请求次数，提升用户体验。webpack5中的url-loader已经被废弃，在webpack.base.js中的Configure中使用asset-module代替//webpack.base.js{test:/\.(png|jpe?g|gif|svg|webp)$/,type:'asset',parser:{//转base64条件dataUrlCondition:{maxSize:25*1024,//25kb}},generator:{//打包到图片文件filename:'images/[contenthash][ext][query]',},}，合理配置Hash我们需要保证修改后的文件需要更新hash值，而未修改的文件仍然保持原来的hash值，这样才能保证被修改的文件浏览器访问时没有变化，上线后会命中缓存，从而达到性能优化的目的在webpack.base.js中配置//webpack.base.jsoutput:{path:path.resolve(__dirname,'../dist'),//在js文件中添加contenthashfilename:'js/chunk-[contenthash].js',clean:true,},
