将单个 React/Vite 项目拆分为多个入口点

Question

这种措辞有几个问题，但方法不完全相同，所以如果这是重读的话，我深表歉意。

我正在使用 Vite 开发一个 React 应用程序。假设它基本上有三个页面：主页、编辑和查看。现在我的项目结构如下：

  index.html
  src/
    app.jsx
    edit.jsx
    home.jsx
    view.jsx

所以目前

index.html

加载

app.jsx

，它显示我的 React 组件之一

<Home/>

、

<Edit/>

或

<View/>

，具体取决于查询参数，即

?mode=edit

等

我想做的就是去

edit.html

。并且还可以减少给定页面的加载侧面。目前，它每次都会构建一个包含所有内容的

index-[hash].js

和

index-[hash].css

。我希望的是更小的负载，即使模块重复（如 React 和 MUI）有一些冗余，因为我不关心磁盘空间，也不关心加载时间/大小。

所以我想我可以做：

  index.html
  edit/
    index.html
  view/
    index.html
  src/
    edit.jsx
    home.jsx
    view.jsx

和一个 Vite 配置：

    build: {
        ...
        rollupOptions: {
            input: {
                edit: './edit/index.html',
                home: './index.html',
                view: './view/index.html'
            },
        }
        ...
    }

这……有点管用。在

dist/assets

中，我得到了一个非常小的

edit-[hash].js

、

home-[hash].js

和

view-[hash].js

，以及巨大的

component-[hash].js

和

component-[hash].css

（其中“组件”是我的另一个 React 组件）。

小

dist/assets/*-[hash].js

文件基本上是我重新实现的

app.jsx

文件，它从

component-[hash].js|css

导入所有内容。所以它把后者当作一个大图书馆，我不知道这是否能给我带来任何好处。另外，命名有点奇怪。

如果我在这里想做什么很清楚，有人可以帮助我理清思路吗？

Answer 1

我认为你对 React 要求太多了，它的目标是构建单页应用程序。

如果您不想要大捆绑包，因为初始加载时间让您担心；你必须为每个文件夹创建一个 React 应用程序；然后确保每个链接都指向正确的 URL。这会增加更多的复杂性，因为更多的部署、重复的代码等。

我强烈推荐React router，我想你应该看看... https://reactrouter.com/en/main/start/overview

React Router 支持“客户端路由”。

• 当 URL 是 yourDomain.com/ 时，视图将是你的 home.jsx 组件
• 当 URL 为 yourDomain.com/edit 时，视图将是您的 edit.jsx 组件
• 当 URL 是 yourDomain.com/view 时，视图将是你的 view.jsx 组件

还有许多其他人。