如何利用Webpack來優化前端性能

本篇內容主要講解“如何利用Webpack來優化前端性能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何利用Webpack來優化前端性能”吧!

一、背景

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

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

一般項目在完成后，會通過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來優化前端性能”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！