面试题：Vue项目中SVG图标优化之文件大小控制

1. 图标精简

去除冗余元素：使用图形编辑工具，如Adobe Illustrator或Inkscape，手动检查并删除SVG文件中不必要的元素，例如隐藏的图层、未使用的路径、多余的节点等。这些冗余信息会增加文件大小，但对图标显示并无实际作用。
简化路径：对于复杂的路径，尝试在不改变图标外观的前提下简化它们。一些绘图工具在生成SVG时可能会创建过于复杂的路径，通过合并或减少路径节点，可以有效减小文件大小。

2. 打包优化

使用SVGO：在打包过程中集成SVGO工具。SVGO是一个基于Node.js的工具，它可以优化SVG文件，去除各种无用信息，如默认值、注释、多余的定义等。在Webpack项目中，可以使用svgo-loader，配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'icons/[name].[ext]'
            }
          },
          {
            loader:'svgo-loader',
            options: {
              plugins: [
                { removeAttrs: { attrs: 'fill' } }, // 移除fill属性
                { removeTitle: true }, // 移除title元素
                { cleanupIDs: true } // 清理无用的ID
              ]
            }
          }
        ]
      }
    ]
  }
};

雪碧图（Sprite）：将多个SVG图标合并成一个SVG雪碧图。在Vue项目中，可以使用vue-svg-loader结合Webpack来实现。这样浏览器只需请求一个文件，减少了HTTP请求数。例如：

// webpack.config.js
const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'vue-svg-loader',
            options: {
              svgo: {
                plugins: [
                  { removeAttrs: { attrs: 'fill' } }
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

然后在Vue组件中引入：

<template>
  <div>
    <svg-icon name="icon-name"></svg-icon>
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon.vue';

export default {
  components: {
    SvgIcon
  }
};
</script>

3. 加载优化

按需加载：在Vue组件中，仅在需要使用图标时才加载对应的SVG文件。可以使用动态导入（Dynamic Import）的方式实现按需加载，避免一次性加载所有图标，例如：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const loadIcon = async (iconName) => {
      const { default: icon } = await import(`@/icons/${iconName}.svg`);
      return icon;
    };

    return {
      loadIcon
    };
  }
});

懒加载：对于页面上不立即显示的图标，采用懒加载策略。可以结合Intersection Observer API或第三方库（如vue-lazyload）来实现。当图标进入视口时才加载对应的SVG文件，减少初始加载的负担。例如使用vue-lazyload：

<template>
  <div>
    <img v-lazy="iconUrl" alt="icon">
  </div>
</template>

<script>
import VueLazyload from 'vue-lazyload';

export default {
  data() {
    return {
      iconUrl: '@/icons/icon-name.svg'
    };
  },
  mounted() {
    this.$use(VueLazyload);
  }
};
</script>

星途面试题库

面试题：Vue项目中SVG图标优化之文件大小控制

知识考点

面试题答案

1. 图标精简

2. 打包优化

3. 加载优化