问题形容

  • 应用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.8cnpm 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.8cnpm 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的文件大小。

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