1

我有一个应用程序，它在登录页面上有 2 个部分，即 Entrance1 和 Entrance2。我想以这样一种方式设计我的 approutes 和延迟加载：当用户单击 Entrance1 时，只有与 Entrance1 相关的路由和 Entrance1 内部所需的组件应该加载到包中（React-lazy 和 suspense。此处不使用 webpack）。Entrance1 和 Entrance2 内 50% 的路由和组件是重复的。

我有一个沙箱，其中所有属于 Entrance1 和 Entrance2 的路由都位于一个 Approute 中。为简洁起见，我在沙箱中添加了最少的路由和组件。但是我的应用程序有 25 条属于 Entrance1 的路由，并且大部分相同的路由用于 Entrance2（网址指向 /entrance2/comp1 而不是 /entrance1/comp1），我觉得这不是一个好的设计。此外，它会使捆绑包不必要地沉重。

如何让这个工作？

创建应用程序的未优化方式

使用 React.lazy 将 App 基于 Routing Link 分解成小包

优化路由和捆绑

  1. 最初，npm run build 后的捆绑器显示了 4 个捆绑包，如下所示：-

    创建优化的生产版本...编译成功。

    File sizes after gzip:

  47.81 KB  build/static/js/2.19e3299d.chunk.js
  1.13 KB   build/static/js/main.7da2e471.chunk.js
  787 B     build/static/js/runtime-main.07a021b3.js
  746 B     build/static/css/main.870850a4.chunk.css

  2. 后期优化：- 创建优化的生产版本...编译成功。

    File sizes after gzip:

47.81 KB (+2 B)  build/static/js/2.55b47d25.chunk.js
1.21 KB (+91 B)  build/static/js/main.53ee5ec1.chunk.js
1.2 KB (+442 B)  build/static/js/runtime-main.eace4f45.js
746 B            build/static/css/main.870850a4.chunk.css
290 B            build/static/js/4.9c560333.chunk.js
288 B            build/static/js/3.cba0f305.chunk.js
256 B            build/static/js/5.7e6af1ad.chunk.js
4

0 回答 0