本文转载自微信公众号《JS日报》，作者慧慧。转载本文请联系JS每日一问公众号。一、背景随着前端项目的逐渐扩大，不可避免会出现的一个问题就是性能。尤其是在大型复杂的项目中，前端业务可能会因为一个小的数据依赖导致整个页面卡顿甚至崩溃。完成后会通过webpack打包。使用webpack来优化前端项目的性能是一个非常重要的环节。2.如何优化通过webpack优化前端的手段：JS代码压缩CSS代码压缩Html文件代码压缩文件大小压缩图片压缩TreeShaking代码分离InlinechunkJS代码压缩Terser是一个JavaScript解释器，绞肉机，压缩器工具集，可以帮助我们压缩和丑化我们的代码，使包更小。在生产模式下，webpack默认使用TerserPlugin。处理我们的代码。如果要自定义，配置如下：constTerserPlugin=require('terser-webpack-plugin')module.exports={...optimization:{minimize:true,minimizer:[newTerserPlugin({parallel:true//计算机cpucores-1})]}}属性介绍如下：extractComments：默认值为true，表示将评论提取到一个单独的文件中。在开发阶段，我们可以将其设置为false来不保持评论并行：使用多个进程并发运行来提高构建速度。默认值是true。默认并发数：os.cpus().length-1terserOptions：设置我们的terser相关配置：compress：设置压缩相关选项，mangle：设置uglification相关选项，可以直接设置为truemangle：设置uglification相关options可以直接设置为truetoplevel：是否转换底层变量keep_classnames：保留类名keep_fnames：保留函数名CSS代码压缩CSS压缩通常用于去除无用的空格等，因为它是难以修改选择器、属性名、值等的CSS压缩，我们可以使用另一个插件：css-minimizer-webpack-pluginnpminstallcss-minimizer-webpack-plugin-D配置方法如下：constCssMinimizerPlugin=require('css-minimizer-webpack-plugin')module.exports={//...optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({parallel:true})]}}html文件代码压缩使用HtmlWebpackPlugin插件来当产生html模板，通过配置属性minify优化htmlmodule.exports={...plugin:[newHtmlwebpackPlugin({...minify:{minifyCSS:false,//是否压缩csscollapseWhitespace:false,//是否折叠空格removeComments:true//是否删除评论}})]}setminify,另一个插件html-minifier-terserfilesizecompression实际上会用于压缩文件大小和减少http传输时宽带丢失npminstallcompression-webpack-plugin-DnewComepressionPlugin({test:/\.(css|js)$/,//需要压缩哪些文件threshold:500,//设置文件大小开始压缩minRatio:0.7,//至少压缩算法的比例:"gzip",//使用的压缩算法})一般来说，图片压缩打包后，有些图片文件的体积远大于js或cssfiles,soimagecompression比较重要的配置方法如下：module:{rules:[{test:/\.(png|jpg|gif)$/,use:[{loader:'file-loader',options:{name:'[name]_[hash].[ext]',outputPath:'images/',}},{loader:'image-webpack-loader',options:{//压缩jpeg的配置mozjpeg:{渐进式：真，曲ality:65},//使用imagemin**-optipng压缩png,enable:false是关闭optipng:{enabled:false,},//使用imagemin-pngquant压缩pngpngquant:{quality:'65-90',speed:4},//压缩gif配置gifsicle:{interlaced:false,},//开启webp时，将jpg、png图片压缩成webp格式webp:{quality:75}}}]},]}TreeShakingTreeShaking是一个术语，在计算机中是指消除死代码，依靠ESModule的静态语法分析（不执行任何代码，可以清楚地知道模块的依赖关系）。在webpack中实现Trss抖动有两种不同的方案：usedExports：通过标记某些函数是否被使用使用，然后使用Terser优化sideEffects：跳过整个模块/文件，直接检查文件是否有sideeffects两种不同的配置方案，效果不同usedExports的配置方法也很简单，设置usedExports为truemodule.exports即可={...optimization:{usedExports}}使用后，未使用的代码会在webpack包中添加unusedharmonyexportmul注解，告知Terser优化时可以删除这段代码如下sum函数未使用，webpack打包会添加注释，terser会在优化的时候去掉这个功能。false，告诉webpack可以安全删除未使用的导出。如果有些文件需要保留，可以设置为"sideEffecis"形式的数组：["./src/util/format.js","*.css"//所有css文件]以上是关于javascripttreeshaking，css也可以实现treeshakingcsstreeshakingcsstreeshaking优化可以安装PurgeCss插件npminallpurgecss-plugin-webpack-DconstPurgeCssPlugin=require('purgecss-webpack-plugin')module.exports={...plugins:[newPurgeCssPlugin({path:glob.sync(`${path.resolve('./src')}/**/*`),{nodir:true}//src里面的所有文件satelist:function(){return{standard:["html"]}}})]}paths：表示哪些目录需要和glob一起分析使用，默认情况下，Purgecss会把我们的html标签样式已删除。如果我们想保留它，我们可以添加一个safelist属性代码分离，将代码分离到不同的bundle中，然后我们可以按需加载它们，或者并行加载这些文件。默认情况下，所有的JavaScript代码（业务代码、第三方依赖、暂时不用的模块）全部加载到首页，这会影响首页的加载速度。代码分离可以分离更小的包，控制资源加载优先级，并提供代码加载性能。这里是通过splitChunksPlugin实现的，插件webpack已经默认安装集成，只需要配置即可。在默认配置中，chunks只针对异步（async）请求，我们可以设置为initial或者allmodule.exports={...optimization:{splitChunks:{chunks:"all"}}}splitChunks的主要属性如下：Chunks，是处理同步代码还是异步代码minSize：拆分包的大小，至少要minSize，如果包的大小不超过minSize，则本次打包不会拆分maxSize：拆分包大于maxSizeintopackagesnotsmallerthanminSizeminChunks:引入的次数，默认1次Inlinechunk可以通过InlineChunkHtmlPlugin插件将一些chunk模块内联到html中，比如运行时代码（模块解析、加载相关的代码、和模块信息），代码量不大，但是constInlineChunkHtmlPlugin=require('react-dev-utils/InlineChunkHtmlPlugin')constHtmlWebpackPlugin=require('必须加载的html-webpack-plugin')module.exports={...插件：[newInlineChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/]}3.总结webpack对前端性能的优化，可以从文件大小入手，然后也可以使用文件大小的形式包化，减少http请求次数等，达到前端性能的优化n/采访/
