1

我正在使用 Webpack 来提取.svg可以内联并在我的 Javascript 组件中使用的文件。它看起来像这样：

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

它工作得很好。查看来自 Webpack 的构建文件，我可以看到所有这些.svg文件都放在了我的主app.jsjavascript 文件中。

这会使网站上的每个用户都需要加载的 Javascript 文件膨胀。尽管这只是一次加载，但当有人尚未缓存文件或由于更改而刷新文件时，它确实会增加初始加载。

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

我如何对抗这个文件的膨胀呢？

据我所知，有两种选择：

  • 使用 XHR 请求检索数据。这可能会很慢，并导致未及时加载的图标闪烁。如果您要拥有像弹性搜索这样的快速东西，这可能是可行的，但否则可能不可行。

  • 使用 Webpack将我所有的.svg文件放入一个单独的文件中，这样它们将被缓存更长时间，因为这些文件被触及的频率低于主要的 javascript 代码。

  • 使用代码拆分将我的.svg. files and put each.svg` 文件拆分为自己的模块。然后让 webpack 在需要时通过异步注入模块来处理它。

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

因为并非所有.svg文件都是必需的，所以第一步是删除require.context并仅导入需要的文件。

关于如何处理这个问题的任何想法？很想听听可能有这方面经验的人的来信。否则，也欢迎任何和所有建议。:)

4

0 回答 0