本文转载自微信公众号「JS每日一题」,作者灰灰。转载本文请联系JS每日一题公众号。

一、背景

随着前端的项目逐渐扩大,必然会带来的一个问题就是性能

尤其在大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整Y ` , ! & ; M个页面卡顿甚至奔溃

一般项目K } :在完成后,会通过webpack进行打包,利用webpack对前端& [ # N项目性能优化是一个十分重要的环节

二、如何优化

通过webpack优化前端的手段有:

  • JS代码压缩
  • CSS代码压缩
  • Html文件代码压缩
  • 文件大小压缩
  • 图片压缩
  • Tree Shaking
  • 代码分离
  • 内联 chL f } } X G g \unk

JS代\ H g I :码压缩

terser是一个JavaScript的解释、绞肉机、压缩机的工具集,可以帮助我们压缩、丑化我们的代码,让5 & l X ?bundle更小

在production模式下,webpack 默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自R x Z ?定义配置它,配置方法如下:

  1. constTerserPlugin=require('terser-webpack-plugin')
  2. module.exports={
  3. ...
  4. optimization:{
  5. mii T ^ 2 w K _ Hnimize:true,
  6. minimizer:[
  7. newTers! ; z / P 6erPlugin({
  8. parallel:true//电脑cpu核数-1
  9. })\ ( c - (
  10. ]
  11. }
  12. }

属性介绍如下:

  • extractComments:默A = / 4 Q m I (认值为true,表示会将注@ s x 8 \释抽取到一个单独的文件中,开发阶段,我们可设置为 false ,不保留注释
  • parallel:使用多进程并发运行提高构建的速度,默认值是true,并发运行的默认数量:os.cpus().length – 1
  • terserOptions:设置我们的terser相关的配置:
  • compress:设置压缩相关的选项,mangle:设置丑化相关的选项,可以直接设置为true
  • mangle:设置丑化相关的选项,可以直接设置为true
  • toplevel:底层变量是否进行Q ? , v i I a转换
  • keep_classnames:保留4 M | ( p类的名称
  • keep_fna– # t = Ames:保留函数的名称

CSS代码压缩

CSS压缩通常是去除无用的空格等,因为很难去修改选择器、属性的名A : P K B H p称、值等

CSS的压缩我们可以使用另外一个插件:css-minimizer-webpack-plugin

  1. npminstallcss-minimizer-webpack-plugin-D

配置方法如下:

  1. constCssMinimizerPlugin=require('css-minimir x Z zzer-webpack-plugin')
  2. module.exports={
  3. //...
  4. opW a * % T 5 q = Itimization:{
  5. minimize:truj ^ ? + , ( ge,
  6. minimizer:[
  7. newCssMi, q x R } ; u tnimizerPlugin({
  8. parallel:true
  9. })
  10. ]
  11. }
  12. }

Html文件代码压缩p } s : s d

使用HtmlWebpackPlugin插件来生成HTML的模板时候,通过配置属性minify进行html优化

  1. module.exports={
  2. ...
  3. plugin:[
  4. newHtmlwebpaW l m Z ` uckPlugin({
  5. ...
  6. minify:{
  7. minc . _ifyCSS:false,//是否压缩css
  8. collapseWhitespace:false,//是否折叠空格
  9. removeComments:true//是否移除注F . G _
  10. }
  11. })
  12. ]
  13. }\ S o B ) ?

设置了minify,实际会使用另一个插件html-minifier-terser

文件大小压缩

对文件的大小进行压缩,减少http传输过程中宽带的损耗

  1. npminstallcompression-webpack-plugin-D
  1. newComepressionPlugin({
  2. test:/\.(css|js)$/,//哪些文件需要压缩
  3. thresholn ? d 8 Ld:500,//设置文件多大开始压缩z R b R [
  4. minRatio:0.7,& 4 z e Q E o//至少压缩的比例
  5. algorithm:"gzip",//采用的0 E A s压缩算法
  6. })

图片压缩

一般来说在打包之后,一些图片文件的大小是远远要比 js 或者 css 文件要来的大,所以图片压缩较为重要

配置方法如下:

  1. module:{
  2. rules:[
  3. {
  4. test:/\.(px 7 )ng|jpg|gif)$/,
  5. use:[
  6. {
  7. loader:'file-loader',
  8. options:{
  9. name:'[name]_[hash].[ext]',
  10. outputPath:'images/',
  11. }
  12. },
  13. {
  14. loader:'image-webpack-loader',
  15. optw ^ L X u 4 +ions:{
  16. //压缩jpeg的配置
  17. mozjpeg:{
  18. pG / L h L rrogressive:true,
  19. quality:6& 6 ; : b p5
  20. },
  21. //使用imagemin**-optipng压缩png,enable:false为关闭
  22. optipng:{
  23. enabled:false,1 Q 2 m H D
  24. },8 H W *
  25. //使用imagemin-pngquant压缩png
  26. pngquant:{
  27. quality:'65-90',
  28. speed:4
  29. },
  30. //压缩gif的配置
  31. gif| * x @sicle:p 5 I j I g 0 ^{
  32. interlaceS ^ E \ J Kd:false,
  33. },
  34. //开启webp,会把jpg和png图片压缩为webp格式
  35. webp:{
  36. quality:75
  37. }
  38. }
  39. }
  40. ]
  41. },
  42. ]
  43. }

Tree Shaking

Tree Shaking 是一个术语,在计算机~ l L 4 # P G中表示消除死代码,依赖于ES Module的静态I Y O语法分析(不执行任何的代码,可以明确知道模块的依赖关系)q J o

在webpack实a \ N U = s现Trss shakinT E U c T k N ng有两种不同的方案:

  • usedExports:通过标记某些函数是否被使用,之后通过Terser来进行y t 4 A f S优化的
  • sideEffects:跳过整个模块/文件,直接查看该文件是否有副作用

两种不同的配置方案, 有不同的效果

usedExpo` X Y ] : Trts

配置方法也很简单,只需要将usedExports设为true

  1. moduh P ] w ?le.exports={
  2. ...
  3. opt; ! vimization:{
  4. usedExports
  5. }
  6. }

使用之后,没被用上的代码在webpd 6 ?ack打包中会G M x F K r f ) =加入unused harmony expJ ! } o ] $ , wort mul注释,用来告知 Terser 在优化时,可以删A ` B _ %除掉这段代码

如下面, j ] H psum函数没被用到,webpack打包会添加注释,terserZ J 1 7{ f k E Z W @ 6 (优化时,则将该函数去掉

sideEffects

sideEffe^ 7 ( { T E ] 9cts用于告知webpack compiler哪些模块时有副作用,配置方法是在pac2 M g 4 n fkage.json中设置sideEffects属性

如果sideEffects设置为false,就是告知webpack可以安全的删除未用到的exports

如果有些文件需要保留,可以设置为数组的形式

  1. "sideEffecis":[
  2. "./src/utilL o Q @ `/; B X E *format} 0 ( N /.js",
  3. "*.css"//所有的css文件
  4. ]

上述都是关于javascript的tree shakin, D ^g,css同样也能够实现tree shaking

css tree shaking

css进行tree shaking优化可以安装PurgeCss插件

  1. np^ * : 9 9 p ; kminstallpurgecss-plugin-webpack-D
  1. constPurgeCssPlugin=require(F % { ! 4 5 r Y'purgecss-webpack-plugin')
  2. module.exports={
  3. ...
  4. plugins:[
  5. newPurgeCssPlugin({
  6. pI j [ 9 . $ qath:glob.sync(`${path.resolve('./src')}/**/*`),{nodir:true}//src里面的所有文件
  7. satelist:function(){
  8. return{
  9. standard:["html"]
  10. }
  11. }
  12. })
  13. ]
  14. }

paths:表示要检测哪些目录下的内容需要被分析,配合使$ o | $ R N用gA Q ^ I N \lob

默认情况下,Purgecss会将我们的html标签的样式移除掉,如果我们希望保留,可以添加一个safelist的属性

代码分离

将代码分离到不同的bundle中,之后我们可以按需加载,或者并行加载这些文件

默认情况下,所有的JavaScrl N 0 k L Y N 9 Bipp P 7 C F : U 5 Ut代码(业务代码、第三方依赖、暂时没有用到的模块)在首页; V }全部都加载,就会影响首页的加载速度

代码分离可以分出出更m ] Y U ^ + \ =小的bunr 0 qdle,以及控制资源加载优先级,提| . R Z ? S供代码的加载性能

这里通过s= – } i EplitChunksPlugin来实现,该插件webpack已经默认安装和集成,只需要配置即可

默认配置中,chunks仅仅针对于异步(a 8 Tasync)请求,我们可以设置为initial或者all

  1. module.exports={
  2. ...
  3. optimization:{
  4. splitChunks:{
  5. chunks:"all"
  6. }
  7. }
  8. }

splitChunks主G H (要属性有如下:

  • Chunks,对同步代码还是异步代码进行处理
  • minSize:拆分包的大小, 至少为minSi` : T J [ M Uze,如何包的大小不超过minSize,这个包不会拆分
  • maxSize:将大于maxSize的包,拆分为不` . y % R k .小于mf r B N ? / qinSize的包
  • minChunks:被引入的次数,默, 7 ] * , ;认是1

内联chunk

可以通过InlineChunkHtmlPlugin插件将一些chunk的模块内联到hx o [ Stml,如runtime的代码(对模块进行解析、加载、模块信息相关的代码),代码量并不大,但是必须加载的

  1. constInlineChunkHtmlPlugin=require('react-dev-utils/InlineChunkHtmlPlugin')
  2. constHtmlWebpackPlugin=require('html-webpack-plugin')
  3. module.exports={
  4. ...
  5. plugin^ D Z z i:[
  6. newInlineChunkHtmlPZ [ ~ ilugin(HtmlWebpackPlugin,[/runtime.+\.js/]
  7. }

三、总结

关于webpackb v & &对前端性能的优化S 6 # ] C e d R a,可以通过文件体积大小入手,其次还可通过分包的形式、减少http请求次数等方式,实现对前端性能的优化

参考文献

https://zhuanlan.zhihu.com/p/j I v B k E 5139498741

ht1 # @ E k ! Rtps://vue3js.cn/interview/

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注