轉：webpack代碼壓縮優化

壓縮代碼

18 天前30前端開發

 

• 壓縮 JavaScript
  • 修改 JavaScript 壓縮處理器
• 其餘壓縮 JavaScript 的方法
• 加快 JavaScript 執行速度
  • 做用域提高
  • 預執行
  • 提高解析
• 壓縮 HTML
• 壓縮 CSS
  • 配置 CSS 壓縮
• 壓縮圖像
• 總結

 

從 Webpack 4 開始，默認狀況下使用 terser 壓縮生產環境下的輸出結果。Terser 是一款兼容 ES2015 + 的 JavaScript 壓縮器。與 UglifyJS（許多項目的早期標準）相比，它是面向將來的選擇。有一個 UglifyJS 的分支—— uglify-es，但因爲它再也不維護，因而就從這個分支誕生出了一個獨立分支，它就是 terser。

儘管 webpack 4 默認狀況下會壓縮輸出，但若是您想進一步調整壓縮行爲或更換壓縮器，那麼，最好了解如何自定義壓縮。

壓縮 JavaScript

所謂壓縮就是將代碼變的更小，安全轉換是指經過重寫代碼而不改變代碼邏輯。這方面的好例子包括重命名變量，甚至是刪除整個的訪問不到的代碼塊（if (false)）。

不安全的轉換可能會破壞代碼，由於它們可能會丟失底層代碼所依賴的隱含內容。例如，Angular 1在使用模塊時須要特定的函數參數命名。除非在這種狀況下采起預防措施，不然重寫參數會破壞代碼。

修改 JavaScript 壓縮處理器

在 Webpack 4 中，經過兩個配置字段控制壓縮過程：optimization.minimize 字段切換壓縮處理器，而 optimization.minimizer 數組用來配置壓縮處理器。

爲了調整默認值，咱們將 terser-webpack-plugin 附加到項目中，以即可以調整它。

首先，請將插件包含在項目中：

npm install terser-webpack-plugin --save-dev

Bash

Copy

要將其附加到配置，請首先爲其定義一個局部配置：

webpack.parts.js

const TerserPlugin = require("terser-webpack-plugin"); exports.minifyJavaScript = () => ({ optimization: { minimizer: [new TerserPlugin({ sourceMap: true })], }, });

JavaScript

Copy

將其合併到主配置：

webpack.config.js

const productionConfig = merge([ parts.clean(PATHS.build), parts.minifyJavaScript(), ... ]);

JavaScript

Copy

若是如今執行 npm run build，您應該看到與以前相同的結果。

默認狀況下禁用源映射。您能夠經過 sourceMap 標誌啓用它們。您應該檢查 terser-webpack-plugin 以獲取更多選項。

要調整 Terser，請附加 terserOptions 相關選項到插件中。

其餘壓縮 JavaScript 的方法

雖然默認值和 terser-webpack-plugin 適用於此用例，但您能夠考慮更多選項：

• babel-minify-webpack-plugin 依賴於 babel-preset-minify，它由 Babel 團隊開發。
• webpack-closure-compiler 能夠並行執行，有時比 babel-minify-webpack-plugin 的結果更小。closure-webpack-plugin 是另外一種選擇。
• butternut-webpack-plugin 在底層使用了 Rich Harris 的實驗性 butternut 壓縮器。

加快 JavaScript 執行速度

特定的解決方案容許您預處理代碼，以便它運行得更快。它們補充了壓縮技術，能夠分爲範圍提高，預處理和提高解析。這些技術有時可能會增長總體包的大小，同時加快代碼的執行速度。

做用域提高

從 Webpack 4 開始，它默認在生產環境下使用做用域提高。它將全部模塊提高到單個範圍，而不是爲每一個模塊編寫單獨的閉包。這樣作會減慢構建速度，但會爲您提升包的執行速度。在 Webpack 博客上閱讀有關做用域提高的更多信息。

將 --display-optimization-bailout 選項傳遞給 Webpack 以獲取與提高結果相關的調試信息。

預執行

prepack-webpack-plugin 使用 Prepack，一個JavaScript 局部執行器。它重寫了能夠在編譯時完成的計算，從而加快了代碼執行速度。另請參閱 val-loader 和 babel-plugin-preval 以獲取其餘解決方案。

提高解析

optimize-js-plugin 經過包裝當即執行函數的方式補充了其餘解決方案，它加強了 JavaScript 代碼最初解析的方式。該插件依賴於 Nolan Lawson 的 optimize-js。

壓縮 HTML

若是您使用 html-loader 處理 HTML 模板，則可使用 posthtml 對模板進行預處理。您還可使用 posthtml-minifier 壓縮 HTML。

壓縮 CSS

clean-css-loader 使您可使用流行的 CSS 壓縮器 clean-css。

optimize-css-assets-webpack-plugin 是一個基於選項的插件，能夠在 CSS 資源上應用選定的壓縮器。使用 MiniCssExtractPlugin 可能致使重複的 CSS，由於它只合並文本塊。OptimizeCSSAssetsPlugin 經過對生成的結果進行操做來避免這個問題，從而能夠產生更好的結果。

配置 CSS 壓縮

在可用的解決方案中，OptimizeCSSAssetsPlugin 最好的選擇了。要將其添加到配置中，請先安裝它和 cssnano：

npm install optimize-css-assets-webpack-plugin cssnano --save-dev

Bash

Copy

與 JavaScript 同樣，您能夠將該想法包含在部分配置中：

webpack.parts.js

const OptimizeCSSAssetsPlugin = require( "optimize-css-assets-webpack-plugin" ); const cssnano = require("cssnano"); exports.minifyCSS = ({ options }) => ({ plugins: [ new OptimizeCSSAssetsPlugin({ cssProcessor: cssnano, cssProcessorOptions: options, canPrint: false, }), ], });

JavaScript

Copy

若是您使用 構建分析章節中討論的 --json 做爲 Webpack 輸出選項，則須要設置 canPrint: false

而後，合併到主配置：

webpack.config.js

const productionConfig = merge([ ... parts.minifyJavaScript(), parts.minifyCSS({ options: { discardComments: { removeAll: true, }, // 在安全模式下運行 cssnano 從而避免潛在的不安全轉換 safe: true, }, }), ... ]);

JavaScript

Copy

若是您如今構建項目（npm run build），您應該注意到 CSS 已經變得更小，由於註釋也被去掉了：

Hash: f51ecf99e0da4db99834
Version: webpack 4.1.1
Time: 3125ms
Built at: 3/16/2018 5:32:55 PM
           Asset       Size  Chunks             Chunk Names
      chunk.0.js  162 bytes       0  [emitted] chunk.1.js 96.8 KiB 1 [emitted] vendors~main main.js 2.19 KiB 2 [emitted] main main.css 1.2 KiB 2 [emitted] main vendors~main.css 1.32 KiB 1 [emitted] vendors~main chunk.0.js.map 204 bytes 0 [emitted] chunk.1.js.map 235 KiB 1 [emitted] vendors~main ...

Bash

Copy

compression-webpack-plugin 容許您將生成壓縮文件的問題交給 Webpack 處理，從而可能節省服務器上的處理時間。

壓縮圖像

咱們可使用 img-loader、imagemin-webpack 和 imagemin-webpack-plugin 來減少圖像大小。這些包會在底層使用一些圖片優化處理器。

如同在性能章節中討論的那樣使用 cache loader 和 thread-loader 是一個好主意，由於它們具有更多的操做空間。

總結

壓縮是您能夠採起的最溫馨的步驟，以使您的構建更小。回顧一下：

• 壓縮過程會分析您的源代碼，若是您使用安全轉換，則將其轉換爲具備相同含義的較小形式。特定的不安全轉換容許您達到更小的結果，同時可能破壞依賴於精確參數命名的代碼。
• Webpack 默認使用 Terser 在生產環境下執行壓縮。其餘解決方案，例如 babel-minify-webpack-plugin，提供了類似的功能，但須要一些相應的依賴和配置。
• 除了JavaScript 以外，還能夠壓縮其餘資源，例如 CSS、HTML 和圖像。壓縮這些資源須要特定的技術，這些技術必須依賴於特定的 loader 和插件。