你不可不知的：揭秘Webpack与Vite SVG引入的独特之法

前端

2023-08-08 01:40:59

SVG 引入利器：Webpack vs. Vite，揭秘两大构建工具的独特秘诀

在前端开发的浪潮中，优化 SVG 资源的加载性能至关重要。了解 Webpack 和 Vite 这两大构建工具在 SVG 引入方面的独特技巧，将帮助我们根据项目需求做出明智选择。

Webpack 的 SVG 引入策略

Webpack 提供了两种加载 SVG 资源的强大 loader：

1. url-loader：将 SVG 转化为 Data URI

url-loader 的魔法在于将 SVG 资源转换为紧凑的数据 URL，并将其直接内嵌到 CSS 文件中。这对于小尺寸的 SVG 非常有效，因为它消除了额外的 HTTP 请求，大幅提升页面加载速度。

2. file-loader：SVG 资源独立输出

file-loader 负责将 SVG 资源复制到指定目录，并返回其绝对路径。这种方法适用于较大的 SVG，避免了将大量数据内嵌到 CSS 文件中，从而减轻了 CSS 文件的负担。

Vite 的 SVG 引入创新

Vite 采取了更现代化的 SVG 处理方式，引入 svg-sprite-loader 这个黑科技：

svg-sprite-loader：SVG 雪碧图的诞生

svg-sprite-loader 的魅力在于能够将多个 SVG 资源融合成一张雪碧图（sprite），输出为 PNG 图片。这种策略有效地减少了 HTTP 请求数量，大大提升了页面加载速度。

技巧对比：Webpack vs. Vite

特性	Webpack	Vite
加载方式	url-loader 或 file-loader	svg-sprite-loader
输出形式	Data URI（url-loader）或独立文件（file-loader）	雪碧图（svg-sprite-loader）
适用场景	小尺寸 SVG（url-loader），较大型 SVG（file-loader）	各种大小 SVG（svg-sprite-loader）

选择最优方案

根据项目的具体需求，我们可以选择最适合的 SVG 引入方式：

小尺寸 SVG： 使用 Webpack 的 url-loader，内嵌到 CSS 文件中。
较大型 SVG： 使用 Webpack 的 file-loader 或 Vite 的 svg-sprite-loader，优化加载性能。

代码示例

Webpack（url-loader）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['url-loader'],
      },
    ],
  },
};

Vite（svg-sprite-loader）：

import svgSpriteLoader from 'vite-svg-loader';

export default {
  plugins: [
    svgSpriteLoader({
      svgoOptions: {
        plugins: [{ removeAttrs: { attrs: '(fill|stroke)' } }],
      },
    }),
  ],
};