创建捆绑包

捆绑包是代码的一部分，代表着功能的一部分。捆绑包可以按需异步加载，并且可以并行加载。一个适当捆绑的应用程序可以比没有使用任何代码拆分的应用程序更具响应性，并且需要更少的千字节和更少的加载时间。这在处理大型应用程序时尤其重要，因为在初始加载时不需要大部分表示逻辑。

Dojo 尝试通过使用路由和出口来自动将代码拆分为更小的捆绑包，从而做出明智的选择。通常，这些捆绑包应该包含相关且相关的代码。这是构建系统的一部分，无需任何额外考虑即可使用。但是，对于那些有特定捆绑需求的人，Dojo 也允许在 .dojorc 配置文件中显式定义捆绑包。

默认情况下，Dojo 应用程序只创建一个应用程序捆绑包。但是，@dojo/cli-build-app 提供了许多配置选项，这些选项将帮助您将应用程序分解成更小的部分，这些部分可以逐步加载。

使用路由进行自动捆绑

默认情况下，Dojo 将根据应用程序的路由创建捆绑包。为此，必须遵循以下几个规则。

src/routes.ts 必须有一个包含路由配置的默认导出
小部件必须是其模块的默认导出
Outlet 的 render 函数必须使用内联函数

src/routes.ts

export default [
	{
		path: 'home',
		outlet: 'home',
		defaultRoute: true
	},
	{
		path: 'about',
		outlet: 'about'
	},
	{
		path: 'profile',
		outlet: 'profile'
	}
];

src/App.ts

export default class App extends WidgetBase {
	protected render() {
		return (
			<div classes={[css.root]}>
				<Menu />
				<div>
					<Outlet key="home" id="home" renderer={() => <Home />} />
					<Outlet key="about" id="about" renderer={() => <About />} />
					<Outlet key="profile" id="profile" renderer={() => <Profile username="Dojo User" />} />
				</div>
				w(Menu, {}),
			</div>
		);
	}
}

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

要查看自动捆绑的实际效果，请使用 @dojo/cli-create-app 创建一个新应用程序，然后运行 npm run build。Dojo 将自动在示例应用程序中的各个路由中创建捆绑包。

手动指定捆绑包

可以在 .dojorc 配置文件中手动指定捆绑包，提供了一种在应用程序中进行声明式代码拆分的机制。当自动路由捆绑不足时，这对于将应用程序分解成更小的捆绑包非常有用。

bundles 功能是构建应用程序命令的一部分。配置由一个捆绑包名称映射组成，后面跟着要匹配的文件或通配符列表。

例如，此配置将 About 和 Profile 捆绑在一起，形成一个名为 additional.[hash].js 的捆绑包。使用 w() 定义的小部件模块将自动转换为父小部件中懒加载的本地注册项。

.dojorc

{
	"build-app": {
		"bundles": {
			"additional": ["src/widgets/About", "src/widgets/Profile"]
		}
	}
}

如果我们想按语言环境创建 nls 国际化模块，我们可以使用通配符来确保每个语言目录下的所有文件都被包含在内。

.dojorc

{
	"build-app": {
		"bundles": {
			"fr": ["src/**/nls/fr/**"],
			"de": ["src/**/nls/de/**"]
		}
	}
}

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

捆绑注意事项

有时，构建工具做出的决定或在 .dojorc 中手动定义的决定可能会导致多个捆绑包共享的通用资源重复。其中一些是不可避免的。避免重复的一个很好的经验法则是尝试确保通用代码位于应用程序依赖树的最外层边缘。换句话说，尽可能减少共享代码之间的依赖关系。如果大量代码可能在捆绑包之间共享（例如，通用小部件），请考虑将这些资源捆绑在一起。