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

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

問題描述

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

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

問題原因-外掛版本問題

筆者的專案的webpack版本是4版本,下載的用於壓縮專案中css的外掛的版本分別是最新版的optimize-css-assets-webpack-plugincssnano。版本分別是:

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

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

cnpm install --save-dev [email protected]
cnpm install [email protected] -D 

也就是npm上的下載人數最多的版本(穩定版),如下圖:

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

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

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

css壓縮步驟

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

第一步,下載外掛包

下載指定版本的外掛包(webpack4版本)

// 淘寶映象
cnpm install --save-dev [email protected]
cnpm install [email protected] -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檔案大小對比,如下圖:

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

筆者的專案,透過optimize-css-assets-webpack-plugincssnano外掛壓縮以後,減小了2kb的檔案大小

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