如何处理'；要求'；文件膨胀我的javascript与网页包？

我正在使用Webpack拉入

.svg

文件，这些文件可以内联并在Javascript组件中使用。它看起来像这样：

export default class Svg {
    constructor() {
        const icons = require.context('public/images/svg', true, /\.svg$/);
    }
}

它工作得非常好。查看网页中的构建文件，我可以看到所有这些

.svg

文件都放在我的主

app.js

javascript文件中

这会使我的Javascript文件膨胀，网站上的每个用户都需要加载该文件。虽然这只是一次加载，但当有人尚未缓存文件时，或者当文件因更改而刷新时，它确实会添加到初始加载

我知道只有在构建时javascript才能通过node.js访问文件系统，因此可能没有办法解决这个问题

但是，我该如何应对这个文件的膨胀呢

据我所知，有两种选择：

• 使用XHR请求检索数据。这可能会很慢，并导致图标闪烁，但没有及时加载。如果您要使用像elasticsearch这样的快速工具，这可能是可行的，但在其他方面可能不可行

• 将我所有的

  .svg

  文件与Webpack一起放在一个单独的文件中，这样它们会被缓存更长的时间，因为这些文件比主javascript代码接触的次数要少

• 使用代码拆分来拆分我的

  .svg。并将每个

  .svg`文件放入自己的模块中。然后让webpack在需要时通过异步注入模块来处理它

最后一种方法可能只对组件和javascript代码有帮助，因为会有加载时间，所以它们不直接可见

因为并非所有的

.svg

文件都是必需的，所以第一步是删除

require.context

并只导入所需的文件

---

你对如何处理这件事有什么想法吗？我很想听听在这方面有经验的人的意见。否则，欢迎提出任何建议。：）

你的意思是：url加载程序我有这个问题，我正在努力找到一个anwserDid你的意思是：url加载程序我有这个问题，我正在努力找到一个anwser