在本文中，我将从三个方面分享一些我常用的技巧：提高优化速度压缩包文件大小改善用户体验。提高速度1.线程加载器多线程可以提高程序的效率，我们在Webpack中也可以使用。而thread-loader是一个可以在Webpack中开启多线程的加载器。安装：npmithread-loader-D配置：{test:/\.js$/,use:['thread-loader','babel-loader'],}2.缓存加载器在我们项目开发过程中，Webpack需要多次构建项目。为了加快后续的构建，我们可以使用缓存，与缓存关联的加载器就是缓存加载器。安装：npmicache-loader-D配置：{test:/\.js$/,use:['cache-loader','thread-loader','babel-loader'],}3.热更新时我们默认情况下，Webpack会在项目中更改文件时重建整个项目，但这不是必需的。我们只需要重新编译这个文件，效率更高。这种策略称为热更新。Webpack内置了热更新插件，我们只需要在配置中开启热更新即可。配置：//importwebpackconstwebpack=require('webpack');then:{plugins:[newwebpack.HotModuleReplacementPlugin()],devServer:{hot:true}}4、exclude&include在我们的项目中，有些文件和文件夹永远不需要参与构建。所以我们可以在配置文件中指定这些文件，防止Webpack去抓取它们，从而提高编译效率。当然，我们也可以指定一些文件需要编译。exclude:不需要编译的文件include:需要编译的文件Configuration:{test:/\.js$/,include:path.resolve(__dirname,'../src'),exclude:/node_modules/,use:['babel-loader']}减小打包文件的大小5.最小化CSS代码css-minimizer-webpack-plugin可以对CSS代码进行压缩和去重。安装：npmicss-minimizer-webpack-plugin-D配置：constCssMinimizerPlugin=require('css-minimizer-webpack-plugin')优化：{minimizer:[newCssMinimizerPlugin(),],}6.最小化JavaScript代码terser-webpack-plugin可以缩小和删除重复的JavaScript代码。安装：npmiterser-webpack-plugin-D配置：constTerserPlugin=require('terser-webpack-plugin')优化：{minimizer:[newCssMinimizerPlugin(),newTerserPlugin({terserOptions:{compress:{drop_console:true,//去掉console语句},},}),],}7、tree-shakingtree-shaking是：只编译实际用到的代码，不编译项目中没有用到的代码。在Webpack5中，tree-shaking默认是开启的。我们只需要确保在最终编译时使用生产模式即可。module.exports={mode:'production'}8.source-map当我们的代码出现bug时，source-map可以帮助我们快速定位源代码的位置。但是这个文件很大。为了平衡性能和准确性，我们应该：在开发模式下生成更准确（但更大）的源映射；在生产模式下生成更小（但不太准确）的源地图。开发模式：module.exports={mode:'development',devtool:'eval-cheap-module-source-map'}生产模式：module.exports={mode:'production',devtool:'nosources-source-map''}9.BundleAnalyzer我们可以使用webpack-bundle-analyzer查看打包后的bundle文件的体积，然后对体积进行相应的优化。安装：npmiwebpack-bundle-analyzer-D配置：const{BundleAnalyzerPlugin}=require('webpack-bundle-analyzer')//configplugins:[newBundleAnalyzerPlugin(),]提升用户体验10.模块延迟加载如果模块不是Lazyloading，会把整个项目的代码打包成一个js文件，导致单个js文件非常大。那么当用户请求页面时，首屏的加载时间就会变长。使用模块的懒加载后，会将大的js文件拆分成多个小的js文件，网页在加载时按需加载，大大提高了首屏加载速度。要启用延迟加载，我们只需要编写以下代码：//src/router/index.jsconstroutes=[{path:'/login',name:'login',component:login},{path:'/home',name:'home',//懒加载组件:()=>import('../views/home/home.vue'),},]11.压缩包g??zip是常用文件压缩算法，可以提高传输效率。但是，此功能需要后端的配合。安装：npmicompression-webpack-plugin-D配置：constCompressionPlugin=require('compression-webpack-plugin')//configplugins:[//gzipnewCompressionPlugin({algorithm:'gzip',threshold:10240,minRatio:0.8})]12.Base64对于一些小图片，可以转成base64编码，可以减少用户的HTTP请求次数，提高用户体验。url-loader在webpack5中已被弃用，我们可以使用assets-module代替。Configuration:{test:/\.(png|jpe?g|gif|svg|webp)$/,type:'asset',parser:{//转base64的条件dataUrlCondition:{maxSize:25*1024,//25kb}},generator:{filename:'images/[contenthash][ext][query]',},},13.正确配置hash我们可以把hash加入bundle文件，这样更容易处理缓存。output:{path:path.resolve(__dirname,'../dist'),filename:'js/chunk-[contenthash].js',clean:true,}以上就是我分享给大家的13件事Webpack的技巧，希望对你有用。结论最后，我们可以用下面的思维导图来总结。
