vite-plugin-svg-icons插件的svg打包出来的js模块占用很大，我怎么把它变小或者异步加载

[lqchenace]

[qinhua]

单独打包

[Qwqw127]

单独打包

怎么单独打包呀

[qinhua]

单独打包

怎么单独打包呀 几点建议：

• 每个 svg 做成单个的图标组件，然后按需引入；
• svg 精灵图也可以按文件夹进行拆分，每个文件夹中的 svg 单独是一份 svg sprite，这样不会全部都在一个 js 里；
• 大图彩色图用 png 或 jpg 代替。

[Qwqw127]

单独打包

怎么单独打包呀 几点建议：

• 每个 svg 做成单个的图标组件，然后按需引入；
• svg 精灵图也可以按文件夹进行拆分，每个文件夹中的 svg 单独是一份 svg sprite，这样不会全部都在一个 js 里；
• 大图彩色图用 png 或 jpg 代替。

在这个插件里如何实现“每个 svg 做成单个的图标组件，然后按需引入“呀？还有个问题就是打包会特别慢

[Minori-ty]

单独打包

怎么单独打包呀

自定义拆包。首先是路由懒加载，如home.vue和about.vue，那么只有点击home.vue才会请求home.js的文件，只有点击about.vue才会请求about.js的文件。这个是打包自带的。 那么就可以拆包，和这些绑定，比如home.vue用到了svg，就和home.js绑定，只有请求了home.js文件，才会去请求相对于的svg，自此完成svg的拆包和动态加载

[cjh-store]

单独打包

怎么单独打包呀

自定义拆包。首先是路由懒加载，如home.vue和about.vue，那么只有点击home.vue才会请求home.js的文件，只有点击about.vue才会请求about.js的文件。这个是打包自带的。 那么就可以拆包，和这些绑定，比如home.vue用到了svg，就和home.js绑定，只有请求了home.js文件，才会去请求相对于的svg，自此完成svg的拆包和动态加载

不行 做了路由懒加载，但是所有的包都会被引入到入口包内 在main.js引入了import 'virtual:svg-icons-register'

[xyduane]

试试在vite.config.js中配置，可以把svg单独打包，不绑定在主包中

build: {
      rollupOptions: {
        treeshake: true,
        output: {
          // 根据不同的js库 拆分包，减少index.js包体积
          manualChunks(id) {
            if(id.includes('svg-icons-register')){
              return "svg-icons"
            }
          },
        },
      }
    },

[qinhua]

试试在vite.config.js中配置，可以把svg单独打包，不绑定在主包中

build: {
      rollupOptions: {
        treeshake: true,
        output: {
          // 根据不同的js库 拆分包，减少index.js包体积
          manualChunks(id) {
            if(id.includes('svg-icons-register')){
              return "svg-icons"
            }
          },
        },
      }
    },

有个问题，如果 svg 越来越多，这个 svg-icons.js 也会越来越大

[qinhua]

高频使用的话，还不如单个引入，不要拼接，长远看，还是使用或者自建支持按需引入的图标库靠谱。

rollupOptions: {
        output: {
          // https://rollupjs.org/configuration-options/#output-manualchunks
          manualChunks(id: string) {
            if (id.indexOf('node_modules') !== -1) {
              const basic = id.toString().split('node_modules/')[1]
              const sub1 = basic.split('/')[0]
              if (sub1 !== '.pnpm') {
                return sub1.toString()
              }
              const name2 = basic.split('/')[1]
              return name2.split('@')[name2[0] === '@' ? 1 : 0].toString()
            }
          },
          entryFileNames() {
            return 'assets/app.[hash].js'
          },
          assetFileNames(chunk: any) {
            const chunkName = chunk.name || ''
            // svg
            if (/.svg$/.test(chunkName)) {
              return 'assets/svg/[name].[hash].[ext]'
            }

            return 'assets/others/[name].[hash].[ext]'
          }
        },
}