SvgChunkWebpackPlugin

SvgChunkWebpackPlugin 根据 Webpack 的入口点创建优化的 SVG 雪碧图。每个雪碧图只包含其入口点中列出的 SVG 依赖项，以改进代码分割，即使是 SVG 文件也不例外。

该插件集成了流行的 SVGO 包，用于生成干净且优化的 SVG 雪碧图。

代码分割是交付文件而不包含页面未使用内容的关键。CSS 和 Javascript 文件已经实现了代码分割，现在通过此插件，SVG 文件也实现了。

何时使用此插件

在多页应用程序中，每个页面必须只包含其必要的依赖项。换句话说，它必须只包含其入口点及其所有依赖项导入的 SVG 文件。

对于可重用组件，SVG 经常在整个项目中重复。现在，您可以创建一个全局 SVG 库，并且每个 Javascript 文件都可以轻松地从该库中导入任何 SVG。得益于 Webpack 编译，入口点依赖项会自动更新。

当您使用由设计软件（如 Sketch 或 Illustrator）导出的 SVG 时，它们的源代码从未经过优化，并且通常包含注释、CSS 类，这些都可能在它们之间产生冲突。该插件在创建雪碧图之前会自动清理所有 SVG。

零配置

该插件无需配置即可工作，并已具备优化的设置。有关高级用法，请参阅“使用配置”部分。

安装

该插件以 svg-chunk-webpack-plugin 的名称在 npm 和 Github 上作为包提供。

npm install svg-chunk-webpack-plugin --save-dev

yarn add svg-chunk-webpack-plugin --dev

[!WARNING] 插件 svg-chunk-webpack-plugin@5 仅支持 ESM。 [!NOTE] 支持的最低 Node.js 版本是 16.20.0，Webpack 版本 >=5.10.3。

示例

该项目在 ./example 目录中包含一个极简示例。运行 npm run build:example 命令以执行 Webpack 示例并查看插件的实际实现。

基本用法

该插件将为每个入口点生成一个 SVG 雪碧图。雪碧图将与所有其他资产一起构建在输出路径目录中。每个雪碧图文件名都由其入口点名称组成（在下面的示例中，这将是 home.svg）。

首先，让我们将加载器和插件添加到 Webpack 配置中。

[!WARNING] 加载器和插件需要协同工作。

webpack.config.js

import SvgChunkWebpackPlugin from 'svg-chunk-webpack-plugin';

export default {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: SvgChunkWebpackPlugin.loader
          }
        ]
      }
    ]
  },
  plugins: [new SvgChunkWebpackPlugin()]
};

[!NOTE] 为了获得更大的灵活性和更好的性能，内联 SVG 文件更好。更少的 HTTP 请求，CSS 属性可以改变样式，页面加载期间没有闪烁。

然后，将雪碧图包含在所需的页面中（我们在以下示例中使用 Twig）。

home.html.twig

{{ include 'home.svg' }}

最后，使用 <use> 标签使用 SVG，如下例所示。将 <svg_name> 替换为 SVG 名称（不带扩展名）。

home.html.twig

<svg>
  <use href="#<svg_name>"></use>
</svg>

---

使用配置

加载器和插件接受配置以覆盖默认行为。

加载器

加载器配置允许个性化 SVGO 配置。SVGO 优化在加载器进程中执行，以优化构建性能。

configFile

类型

type configFile = string | boolean;

默认值：path.resolve(opts.root, 'svgo.config.js')

告诉加载器是否加载自定义 SVGO 配置。自定义配置可以通过 configFile: false 禁用。

webpack.config.js

export default {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: SvgChunkWebpackPlugin.loader,
        options: {
          configFile: './path/svgo.config.js'
        }
      }
    ]
  }
};

SVGO 自定义配置

SVGO 有一个默认预设来优化 SVG 文件。有关详细信息，请参阅如何配置 svgo。

svgo.config.js

export default {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          inlineStyles: {
            onlyMatchedOnce: false
          },
          removeViewBox: false
        }
      }
    },
    {
      name: 'convertStyleToAttrs'
    }
  ]
};

插件

插件配置允许个性化雪碧图设置。

filename

类型

type filename = string;

默认值：'[name].svg'

告诉插件是否个性化默认的雪碧图文件名。占位符 [name] 会自动替换为入口点名称。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      filename: '[name].svg'
    })
  ]
};

[!NOTE] filename 参数与 Webpack 缓存占位符兼容，请参阅缓存部分。

svgstoreConfig

类型

type svgstoreConfig = object;

默认值：{ cleanDefs: false, cleanSymbols: false, inline: true }

SVG 雪碧图是使用 svgstore 包构建的。根据您的需要，从 svgstore 文档中可用的选项列表中更新参数。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      svgstoreConfig: {
        svgAttrs: {
          'aria-hidden': true,
          style: 'position: absolute; width: 0; height: 0; overflow: hidden;'
        }
      }
    })
  ]
};

[!NOTE] 为避免 LinearGradient 冲突，请避免使用会破坏 SVG 定义的 display: none 属性。

generateSpritesManifest

类型

type generateSpritesManifest = boolean;

默认值：false

告诉插件是否生成 sprites-manifest.json。JSON 文件包含入口点包含的所有 SVG 列表。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      generateSpritesManifest: true
    })
  ]
};

generateSpritesPreview

类型

type generateSpritesPreview = boolean;

默认值：false

告诉插件是否生成 sprites-preview.html。HTML 预览包含所有入口点包含的 SVG 的显示列表，以及 SVG 概览和名称。请参阅示例中的雪碧图预览。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      generateSpritesPreview: true
    })
  ]
};

---

缓存

使用 webpack 缓存，根据您的需求有多个占位符可用。如果 SVG 内联在页面中，此选项则不实用。

[!NOTE] [contenthash] 占位符是最佳选择，因为它取决于雪碧图内容。缓存占位符在构建性能方面开销较大，请仅在生产模式下使用。

[contenthash]

[contenthash] 占位符将添加一个基于雪碧图内容的唯一哈希值。当雪碧图的内容发生变化时，哈希值也会随之变化。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      filename: '[name].[contenthash].svg'
    })
  ]
};

[fullhash]

[fullhash] 占位符将为每次构建添加一个唯一的哈希值。当编译构建更新时，哈希值也会随之变化。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      filename: '[name].[fullhash].svg'
    })
  ]
};

许可证

svg-chunk-webpack-plugin 根据 MIT 许可证获得许可。

由 @yoriiis 用 ♥ 创建。