乐趣区

关于webpack:cssProcessorprocesscsssource-processOptions-报错css压缩之性能优化

问题形容

  • 应用 optimize-css-assets-webpack-plugincssnano插件在 vue 我的项目中进行 css 压缩。
  • npm run build 打包时报错了
  • 报错截图如下:

问题起因 - 插件版本问题

笔者的我的项目的 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 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-plugincssnano插件压缩流程
  • 以及压缩前后的比照

第一步,下载插件包

下载指定版本的插件包(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-plugincssnano插件压缩当前,减小了 2kb 的文件大小

具体这两个插件可能压缩的大小取决于我的项目的不同。本我的项目收益不是特地高,然而苍蝇再小也有肉呗 …

退出移动版