Dojo-Build-进阶

创建包一个包就是一部分代码,它用于表示一部分功能。可以按需异步、并行加载包。与不使用任何代码拆分技术的应用程序相比,合理分包的应用程序可以显著提高响应速度,需要请求的字节数更少,加载的时间更短。在处理大型应用程序时,这一点尤其重要,因为这类应用程序的大部分表现层逻辑在初始化时是不需要加载的。 Dojo 尝试使用路由和 outlet 智能地做出选择,自动将代码拆分为更小的包。通常各个包内的代码都是紧密相关的。这是构建系统内置的功能,可直接使用。但是,对于有特殊分包需求的用户,Dojo 还允许在 .dojorc 配置文件中显示定义包。 默认情况下,Dojo 应用程序只创建一个应用程序包。但是 @dojo/cli-build-app 提供了很多配置选项,这些选项可将应用程序拆分为较小的、可逐步加载的包。 使用路由自动分包默认情况下,Dojo 会基于应用程序的路由自动创建包。要做到这一点需要遵循以下几条规则。 src/routes.ts 必须默认导出路由配置信息部件所属的模块必须默认导出部件Outlet 的 render 函数必须使用内联函数src/routes.tsexport default [ { path: 'home', outlet: 'home', defaultRoute: true }, { path: 'about', outlet: 'about' }, { path: 'profile', outlet: 'profile' }];src/App.tsexport 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> </div> ); }}将会为应用程序的每个顶级路由生成单独的包。在本例中,会生成一个应用程序的主包以及 src/Home、src/About 和 src/Profile 三个包。 ...

November 4, 2019 · 5 min · jiezi