在 Minify 包中禁用 background:url(...) 编码为 base64

Question

我使用minify来最小化我的js和css文件。 但是在最小化文件之后，包含background:url(...)的文件变大了，因为 url 被编码为base64 。

我想关闭这个css-base64-images功能。 但根据 2016 年提出的问题，这是不可能的。

package.json ：

  "devDependencies": {
    "minify": "^9.1.0",
    "postcss-cli": "^10.0.0"
  }

我的代码：

import { minify } from 'minify';

const myFunction = () => {
  /* some code... */

  minify(filepath).then((file) => {
                    /* some code... */
  });
}

根据这篇文章，在大多数情况下，没有必要使用base64优化图像。 在我的例子中，一些css文件已经从40-50 KB增长到10,000 KB ，因此我想关闭base64 。

Answer 1

我想出了一个“关闭” base64的解决方案。

minify函数接受 2 个参数， name和userOptions 。

userOptions被传递到node_modules\css-b64-images\lib\css-b64-images.js 。 有一个名为replaceUrlByB64的函数，如果maxSize小于文件大小，它不会编码为base64 。

if (stat.size > options.maxSize){
      return cb(new Error('Skip ' + imageUrl + ' Exceed max size'), css);
}

我的代码：

import { minify } from 'minify';

/* Set image maxSize to 0 to skip url replacement by base64 in minify.
   node_modules/css-b64-images/lib/css-b64-images.js function: replaceUrlByB64 */
const skipReplacingUrlByB64 = {
    img : {
        maxSize: 0,
    },
}

const myFunction = () => {
  /* some code... */

  minify(filepath, skipReplacingUrlByB64).then((file) => {
                    /* some code... */
  });
}

skipReplacingUrlByB64对象的结构基于如何在node_modules\minify\lib\img.js userOptions检索 userOptions

const options = {
    ...defaultOptions,
    ...userOptions?.img || {},
};

package.json与问题中的相同

  "devDependencies": {
    "minify": "^9.1.0",
    "postcss-cli": "^10.0.0"
  }