SvgChunkWebpackPlugin

免责声明: SvgChunkWebpackPlugin 是由社区成员维护的第三方软件包,它可能没有与 webpack 相同的支持、安全策略或许可证,并且它不受 webpack 维护。

GitHub Workflow Status (branch) Coverage Status

svg-chunk-webpack-plugin 根据 Webpack 的入口点创建优化的 SVG 精灵图。每个精灵图仅包含其入口点上列出的 SVG 依赖项,以改进代码拆分,即使在 SVG 文件上也是如此。

该插件包含流行的 SVGO 软件包,用于生成干净且优化的 SVG 精灵图。

代码拆分是交付不包含页面未使用的任何内容的文件的关键。它已经存在于 CSS、Javascript 中,现在通过此插件存在于 SVG 文件中。

何时使用此插件

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

对于可重用组件,SVG 通常在所有项目中重复。现在,您可以创建一个全局 SVG 库,每个 Javascript 文件都可以轻松从此库导入任何 SVG。多亏了 Webpack 编译,入口点依赖项会自动更新。

当您使用 Sketch 或 Illustrator 等设计软件导出的 SVG 时,它们的源代码永远不会被优化,并且通常包含注释、CSS 类,这些注释和 CSS 类可能会在它们之间产生冲突。该插件会在创建精灵图之前自动清理所有 SVG。

零配置

该插件无需配置即可使用已经优化的设置。有关高级用法,请参阅 使用配置 部分。

安装

该插件作为名称为 svg-chunk-webpack-plugin 的软件包在 npmGithub 上提供。

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

警告 svg-chunk-webpack-plugin@5 仅为 ESM。

注意 最低支持的 Node.js 版本为 16.20.0,Webpack >=5.10.3

示例

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

基本用法

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

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

警告 加载器和插件需要一起工作。

webpack.config.js

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

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

注意

为了获得更高的灵活性和更好的性能,内联 SVG 文件更好。更少的 HTTP 请求、用于更改样式的 CSS 属性、页面加载期间不会闪烁。

然后,在所需的页面中包含雪碧图(我们在以下示例中使用 Twig)。

home.html.twig

{{ include 'home.svg' }}

最后,使用 <use> 标签使用 SVG,如下例所示。用 SVG 名称(不带扩展名)替换 <svg_name>

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'
    })
  ]
};

注意 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;'
        }
      }
    })
  ]
};

注意 为了避免 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 概览和名称。请参阅示例的sprites 预览

webpack.config.js

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

缓存

使用webpack 缓存,根据您的需要提供了几个占位符。对于页面中内联的 SVG,此选项无用。

注意

[contenthash] 占位符是最佳选择,因为它取决于 sprite 内容。缓存占位符在构建性能方面代价高昂,仅在生产模式下使用它。

[contenthash]

[contenthash] 占位符将根据 sprite 的内容添加一个唯一哈希。当 sprite 的内容发生更改时,哈希也将更改。

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 用 ♥ 创建。

2 位贡献者

yoriiisalexander-akait