在本文中,我将从三个方面分享一些我常用的技巧:提高优化速度压缩包文件大小改善用户体验。提高速度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的技巧,希望对你有用。结论最后,我们可以用下面的思维导图来总结。
