cssProcessor.process(css.source, processOptions, 報錯（css壓縮之效能最佳化）

水冗水孚發表於2023-01-22
CSS

問題描述

  • 使用optimize-css-assets-webpack-plugin和cssnano外掛在vue專案中進行css壓縮。
  • 在npm run build打包時報錯了
  • 報錯截圖如下：

問題原因-外掛版本問題

筆者的專案的webpack版本是4版本，下載的用於壓縮專案中css的外掛的版本分別是最新版的optimize-css-assets-webpack-plugin和cssnano。版本分別是：

"devDependencies": {
    ...
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "cssnano": "^5.1.14",
    ...
  },
直接cnpm i xxx 就會預設下載最新的xxx包，最好指定版本

筆者嘗試了一下，只需要將版本降低一下就行了，下圖是筆者使用的對應版本

cnpm install --save-dev optimize-css-assets-webpack-plugin@5.0.8
cnpm install cssnano@4.1.11 -D

也就是npm上的下載人數最多的版本（穩定版），如下圖：

  • 大家以後遇到webpack的相關外掛報錯時，可以考慮是不是外掛版本的問題。
  • 最新版的外掛和之前版本的外掛相比，可能一些語法，或者寫法發生了變化，導致外掛在執行時報錯。
  • 所以在安裝外掛時最好去npm上看看哪個版本的下載次數最多，下載次數最多的那個版本，也是最穩定版。
  • 當然也要看看相應版本的釋出時間，綜合比較選擇

css壓縮步驟

  • 在專案最佳化時，各種資源，視情況而定去壓縮
  • 如圖片壓縮、字型壓縮、js壓縮、當然css能壓縮，也去壓縮一下下
  • 順帶記錄一下vue專案中使用optimize-css-assets-webpack-plugin和cssnano外掛壓縮流程
  • 以及壓縮前後的對比

第一步，下載外掛包

下載指定版本的外掛包（webpack4版本）

// 淘寶映象
cnpm install --save-dev optimize-css-assets-webpack-plugin@5.0.8
cnpm install cssnano@4.1.11 -D

第二步，在vue.config.js中的configureWebpack中使用

我們知道configureWebpack有物件和函式兩種寫法，兩種寫法舉例如下：

物件寫法

// 引入兩個外掛包
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const cssnano = require('cssnano')

module.exports = {
    configureWebpack: {
        plugins: [
          new OptimizeCSSAssetsPlugin({ // 例項化一個此外掛
            assetNameRegExp: /\.(sa|sc|c)ss$/g, // 透過正則匹配要去實行壓縮的樣式檔案
            cssProcessor: cssnano, // 依賴於cssnano進行壓縮計算
            cssProcessorPluginOptions: { // 配置項
              preset: ['default', {
                safe: true,  //設定為安全,避免cssnano重新計算
                discardComments: { removeAll: true }, //把註釋都清除掉
                normalizeUnicode: false // 建議false，否則在使用unicode-range的時候會產生亂碼
              }]
            },
          }),
        ]
    },
}

函式寫法

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // css壓縮
const cssnano = require('cssnano')

module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return // 開發環境不配置
        return { // 生產環境再透過外掛進行配置
            plugins: [
                new OptimizeCSSAssetsPlugin({ // 例項化一個此外掛
                    assetNameRegExp: /\.(sa|sc|c)ss$/g, // 透過正則匹配要去實行壓縮的樣式檔案
                    cssProcessor: cssnano, // 依賴於cssnano進行壓縮計算
                    cssProcessorPluginOptions: { // 配置項
                      preset: ['default', {
                        safe: true,  //設定為安全,避免cssnano重新計算
                        discardComments: { removeAll: true }, //對註釋的處理
                        normalizeUnicode: false // 建議false,否則在使用unicode-range的時候會產生亂碼
                      }]
                    },
                }),
            ]
        }

}

第三步npm run build打包

我們來看一下css壓縮前後的打包以後的dist資料夾中的css檔案大小對比，如下圖：

筆者的專案，透過optimize-css-assets-webpack-plugin和cssnano外掛壓縮以後，減小了2kb的檔案大小。

具體這兩個外掛能夠壓縮的大小取決於專案的不同。本專案收益不是特別高，但是蒼蠅再小也有肉唄...

相關文章