[[398017]]

本文轉載自微信公眾號「JS每日一題」，作者灰灰。轉載本文請聯系JS每日一題公眾號。

一、背景

隨著前端的項目逐漸擴大，必然會帶來的一個問題就是性能

尤其在大型復雜的項目中，前端業務可能因為一個小小的數據依賴，導致整個頁面卡頓甚至奔潰

一般項目在完成后，會通過webpack進行打包，利用webpack對前端項目性能優化是一個十分重要的環節

二、如何優化

通過webpack優化前端的手段有：

• JS代碼壓縮
• CSS代碼壓縮
• Html文件代碼壓縮
• 文件大小壓縮
• 圖片壓縮
• Tree Shaking
• 代碼分離
• 內聯 chunk

JS代碼壓縮

terser是一個JavaScript的解釋、絞肉機、壓縮機的工具集，可以幫助我們壓縮、丑化我們的代碼，讓bundle更小

在production模式下，webpack 默認就是使用 TerserPlugin 來處理我們的代碼的。如果想要自定義配置它，配置方法如下：

const TerserPlugin = require('terser-webpack-plugin') 
module.exports = { 
    ... 
    optimization: { 
        minimize: true, 
        minimizer: [ 
            new TerserPlugin({ 
                parallel: true // 電腦cpu核數-1 
            }) 
        ] 
    } 
} 

屬性介紹如下：

• extractComments：默認值為true，表示會將注釋抽取到一個單獨的文件中，開發階段，我們可設置為 false ，不保留注釋
• parallel：使用多進程并發運行提高構建的速度，默認值是true，并發運行的默認數量：os.cpus().length - 1
• terserOptions：設置我們的terser相關的配置：
• compress：設置壓縮相關的選項，mangle：設置丑化相關的選項，可以直接設置為true
• mangle：設置丑化相關的選項，可以直接設置為true
• toplevel：底層變量是否進行轉換
• keep_classnames：保留類的名稱
• keep_fnames：保留函數的名稱

CSS代碼壓縮

CSS壓縮通常是去除無用的空格等，因為很難去修改選擇器、屬性的名稱、值等

CSS的壓縮我們可以使用另外一個插件：css-minimizer-webpack-plugin

npm install css-minimizer-webpack-plugin -D 

配置方法如下：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') 
module.exports = { 
    // ... 
    optimization: { 
        minimize: true, 
        minimizer: [ 
            new CssMinimizerPlugin({ 
                parallel: true 
            }) 
        ] 
    } 
} 

Html文件代碼壓縮

使用HtmlWebpackPlugin插件來生成HTML的模板時候，通過配置屬性minify進行html優化

module.exports = { 
    ... 
    plugin:[ 
        new HtmlwebpackPlugin({ 
            ... 
            minify:{ 
                minifyCSS:false, // 是否壓縮css 
                collapseWhitespace:false, // 是否折疊空格 
                removeComments:true // 是否移除注釋 
            } 
        }) 
    ] 
} 

設置了minify，實際會使用另一個插件html-minifier-terser

文件大小壓縮

對文件的大小進行壓縮，減少http傳輸過程中寬帶的損耗

npm install compression-webpack-plugin -D 

new ComepressionPlugin({ 
    test:/\.(css|js)$/,  // 哪些文件需要壓縮 
    threshold:500, // 設置文件多大開始壓縮 
    minRatio:0.7, // 至少壓縮的比例 
    algorithm:"gzip", // 采用的壓縮算法 
}) 

圖片壓縮

一般來說在打包之后，一些圖片文件的大小是遠遠要比 js 或者 css 文件要來的大，所以圖片壓縮較為重要

配置方法如下：

module: { 
  rules: [ 
    { 
      test: /\.(png|jpg|gif)$/, 
      use: [ 
        { 
          loader: 'file-loader', 
          options: { 
            name: '[name]_[hash].[ext]', 
            outputPath: 'images/', 
          } 
        }, 
        { 
          loader: 'image-webpack-loader', 
          options: { 
            // 壓縮 jpeg 的配置 
            mozjpeg: { 
              progressive: true, 
              quality: 65 
            }, 
            // 使用 imagemin**-optipng 壓縮 png，enable: false 為關閉 
            optipng: { 
              enabled: false, 
            }, 
            // 使用 imagemin-pngquant 壓縮 png 
            pngquant: { 
              quality: '65-90', 
              speed: 4 
            }, 
            // 壓縮 gif 的配置 
            gifsicle: { 
              interlaced: false, 
            }, 
            // 開啟 webp，會把 jpg 和 png 圖片壓縮為 webp 格式 
            webp: { 
              quality: 75 
            } 
          } 
        } 
      ] 
    }, 
  ] 
}  

Tree Shaking

Tree Shaking 是一個術語，在計算機中表示消除死代碼，依賴于ES Module的靜態語法分析(不執行任何的代碼，可以明確知道模塊的依賴關系)

在webpack實現Trss shaking有兩種不同的方案：

• usedExports：通過標記某些函數是否被使用，之后通過Terser來進行優化的
• sideEffects：跳過整個模塊/文件，直接查看該文件是否有副作用

兩種不同的配置方案， 有不同的效果

usedExports

配置方法也很簡單，只需要將usedExports設為true

module.exports = { 
    ... 
    optimization:{ 
        usedExports 
    } 
} 

使用之后，沒被用上的代碼在webpack打包中會加入unused harmony export mul注釋，用來告知 Terser 在優化時，可以刪除掉這段代碼

如下面sum函數沒被用到，webpack打包會添加注釋，terser在優化時，則將該函數去掉

sideEffects

sideEffects用于告知webpack compiler哪些模塊時有副作用，配置方法是在package.json中設置sideEffects屬性

如果sideEffects設置為false，就是告知webpack可以安全的刪除未用到的exports

如果有些文件需要保留，可以設置為數組的形式

"sideEffecis":[ 
    "./src/util/format.js", 
    "*.css" // 所有的css文件 
] 

上述都是關于javascript的tree shaking，css同樣也能夠實現tree shaking

css tree shaking

css進行tree shaking優化可以安裝PurgeCss插件

npm install purgecss-plugin-webpack -D 

const PurgeCssPlugin = require('purgecss-webpack-plugin') 
module.exports = { 
    ... 
    plugins:[ 
        new PurgeCssPlugin({ 
            path:glob.sync(`${path.resolve('./src')}/**/*`), {nodir:true}// src里面的所有文件 
            satelist:function(){ 
                return { 
                    standard:["html"] 
                } 
            } 
        }) 
    ] 
} 

paths：表示要檢測哪些目錄下的內容需要被分析，配合使用glob

默認情況下，Purgecss會將我們的html標簽的樣式移除掉，如果我們希望保留，可以添加一個safelist的屬性

代碼分離

將代碼分離到不同的bundle中，之后我們可以按需加載，或者并行加載這些文件

默認情況下，所有的JavaScript代碼(業務代碼、第三方依賴、暫時沒有用到的模塊)在首頁全部都加載，就會影響首頁的加載速度

代碼分離可以分出出更小的bundle，以及控制資源加載優先級，提供代碼的加載性能

這里通過splitChunksPlugin來實現，該插件webpack已經默認安裝和集成，只需要配置即可

默認配置中，chunks僅僅針對于異步(async)請求，我們可以設置為initial或者all

module.exports = { 
    ... 
    optimization:{ 
        splitChunks:{ 
            chunks:"all" 
        } 
    } 
} 

splitChunks主要屬性有如下：

• Chunks，對同步代碼還是異步代碼進行處理
• minSize：拆分包的大小, 至少為minSize，如何包的大小不超過minSize，這個包不會拆分
• maxSize：將大于maxSize的包，拆分為不小于minSize的包
• minChunks：被引入的次數，默認是1

內聯chunk

可以通過InlineChunkHtmlPlugin插件將一些chunk的模塊內聯到html，如runtime的代碼(對模塊進行解析、加載、模塊信息相關的代碼)，代碼量并不大，但是必須加載的

const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 
module.exports = { 
    ... 
    plugin:[ 
        new InlineChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/] 
} 

三、總結

關于webpack對前端性能的優化，可以通過文件體積大小入手，其次還可通過分包的形式、減少http請求次數等方式，實現對前端性能的優化

參考文獻

https://zhuanlan.zhihu.com/p/139498741

 

https://vue3js.cn/interview/