我正在使用Webpack提取.svg文件，我可以在我的Javascript组件中内联和使用这些文件。它看起来像这样：
export default class Svg {
constructor() {
const icons = require.context('public/images/svg', true, /\.svg$/);
}
}
它完美无缺。从Webpack查看构建文件，我可以看到所有这些.svg文件都放在我的主app.js javascript文件中。
这会增加我的Javascript文件，网站上的每个用户都需要加载。虽然这只是一次性加载，但是当有人尚未缓存文件时，或者由于更改而刷新文件时，它会累计到初始加载。
我知道只有在构建时，javascript才能通过node.js访问文件系统，因此可能无法解决这个问题。
我如何对抗这个文件的臃肿呢？
据我所知，有几种选择：
使用XHR请求检索数据。这可能会很慢并导致未及时加载的图标闪烁。如果你像弹性搜索一样快速，但可能不可行，这可能是可行的。
将我的所有.svg文件放入带有Webpack的单独文件中，这样它们就会被缓存更长时间，因为这些文件的触摸方式比主要的javascript代码更少。
使用代码拆分将我的.svg. files and put each。svg`文件拆分为自己的模块。然后让webpack通过在需要时异步注入模块来处理它。
最后一种方法可能只对那些因负载时间而无法直接显示的组件和javascript代码有用吗？
因为并非所有.svg文件都是必需的，所以第一步是删除require.context并仅导入所需的文件。
有关如何处理此问题的任何想法？很想听听可能有这方面经验的人。否则，欢迎任何和所有建议。 ：）