创建包

一个包就是一部分代码，它用于表示一部分功能。可以按需异步、并行加载包。与不使用任何代码拆分技术的应用程序相比，合理分包的应用程序可以显著提高响应速度，需要请求的字节数更少，加载的时间更短。在处理大型应用程序时，这一点尤其重要，因为这类应用程序的大部分表现层逻辑在初始化时是不需要加载的。

Dojo 尝试使用路由和 outlet 智能地做出选择，自动将代码拆分为更小的包。通常各个包内的代码都是紧密相关的。这是构建系统内置的功能，可直接使用。但是，对于有特殊分包需求的用户，Dojo 还允许在 .dojorc 配置文件中显示定义包。

默认情况下，Dojo 应用程序只创建一个应用程序包。但是 @dojo/cli-build-app 提供了很多配置选项，这些选项可将应用程序拆分为较小的、可逐步加载的包。

使用路由自动分包

默认情况下，Dojo 会基于应用程序的路由自动创建包。要做到这一点需要遵循以下几条规则。

  1. src/routes.ts 必须默认导出路由配置信息
  2. 部件所属的模块必须默认导出部件
  3. Outlet 的 render 函数必须使用内联函数

src/routes.ts

  1. export default [
  2.     {
  3.         path: 'home',
  4.         outlet: 'home',
  5.         defaultRoute: true
  6.     },
  7.     {
  8.         path: 'about',
  9.         outlet: 'about'
  10.     },
  11.     {
  12.         path: 'profile',
  13.         outlet: 'profile'
  14.     }
  15. ];

src/App.ts

  1. export default class App extends WidgetBase {
  2.     protected render() {
  3.         return (
  4.             <div classes={[css.root]}>
  5.                 <Menu />
  6.                 <div>
  7.                     <Outlet key="home" id="home" renderer={() => <Home />} />
  8.                     <Outlet key="about" id="about" renderer={() => <About />} />
  9.                     <Outlet key="profile" id="profile" renderer={() => <Profile username="Dojo User" />} />
  10.                 </div>
  11.             </div>
  12.         );
  13.     }
  14. }

将会为应用程序的每个顶级路由生成单独的包。在本例中，会生成一个应用程序的主包以及 src/Home、src/About 和 src/Profile 三个包。

使用 @dojo/cli-create-app 新建一个应用程序，然后运行 npm run build，就可看到自动分包的实际效果。Dojo 将自动为示例应用程序中的所有路由创建包。

手动分包

可以在 .dojorc 配置文件中手动分包，这就为应用程序提供了一种声明式代码拆分的手段。当自动根据路由分包无法满足需求时，这对于将应用程序拆分为更小的包是极其有用的。

bundles 功能是 build app 命令的一部分。配置由由一组包名和紧随其后的文件列表或匹配符组成。

例如，以下配置将 About 和 Profile 合在一个包中，并命名为 additional.[hash].js。在 w() 中使用的部件模块将被自动转换为在父部件中延迟加载的本地注册项。

.dojorc

  1. {
  2.     "build-app": {
  3.         "bundles": {
  4.             "additional": ["src/widgets/About", "src/widgets/Profile"]
  5.         }
  6.     }
  7. }

如果我们想分地区创建国际化模块，我们应该使用通配符以确保将每个语言目录下的所有文件都会包含在内。

.dojorc

  1. {
  2.     "build-app": {
  3.         "bundles": {
  4.             "fr": ["src/**/nls/fr/**"],
  5.             "de": ["src/**/nls/de/**"]
  6.         }
  7.     }
  8. }

在这种情况下，Dojo 将创建名为 fr.[hash].js 的包，和名为 de.[hash].js 的包。想了解更新信息，请参阅国际化参考指南中的使用消息包。

分包注意事项

有时，根据构建工具自动分包或者在 .dojorc 中手动定义的包中会重复包含被多个包共享的资源。有一些是无法避免的。一个避免重复的法则是尝试将共享代码移到应用程序依赖树的最外围。换句话说，就是尽可能减少共享代码之间的依赖。如果大量的代码在包之间共享（例如，公共的部件），请考虑将这些资源放在一个包中。