如何在Svelte中将多个组件捆绑到单个模块中？

Question

我使用Svelte (v3)、Routify (v2)和Vite (v3)构建了一个应用程序。申请主页由多个部分组成，每个部分由多个组件组成。因此，当这个页面加载时，它会向50+组件发出网络请求，从而导致网络瀑布地狱！

是否有任何机制将组件捆绑到模块中(如功能模块)并加载它们？例如，我可以将多个报头相关组件捆绑到一个报头模块中，并发出1个网络请求而不是多个！

​

​

routify.config.js

module.exports = {
  routifyDir: '.routify',
  dynamicImports: true,
  extensions: ['svelte']
}

vite.config.js

export default defineConfig({
  server: {
    port: 5000,
  },
  plugins: [
    svelte({
      preprocess: [preprocess()],
    }),
  ],
});

参考在GitHub回购中编写代码

Answer 1

Routify只处理加载页面和模块(_layout.svelte)。

这意味着对于页面/admin/仪表板，Routify将动态导入

_layout.svelte
admin/_layout.svelte
admin/dashboard.svelte

如何导入组件是在您和您的绑定器之间进行的。在这种情况下，维特。听起来，Vite正在将您的导入转换为动态导入。

Answer 2

我相信你的问题不是问题。我很肯定你只是忘了为生产而建造它。

在我构建您的项目之前，我感到很困惑，因为vite擅长修复您所描述的问题。在开发速度模式下运行vite时，它是进行热模块替换，在检测到任何更改时实时更新更改的组件，而不是整个页面。为了使vite能够做到这一点，我假设它需要单独加载每个组件，因此产生了“瀑布地狱”。

如果您使用npm run build:prod构建用于生产的网站，然后使用npm run preview在本地预览站点，您可以看到所有单独的组件请求都消失了，相反，您有两个优化的包。

在开发模式下，您有67个主页请求：

​

当该网站是为生产而构建时，您有8个主页请求：

​