随着你的单页应用扩大，其下载时间也越来越长。这对提高用户体验不会有好处（提示：但用户体验正是我们开发单页应用的原因）。更多的代码意味着更大的文件，直到代码压缩已经不能满足你的需求，你唯一能为你的用户做的就是不要再让他一次性下载整个应用。这时，延迟加载就派上用场了。不同于一次性下载所有文件，而是让用户只下载他现在需要的文件。
所以。如何让你的应用程序实现延迟加载？它基本上是分成两件事情。把你的模块拆分成小块，并实施一些机制，允许按需加载这些块。听起来似乎有很多工作量，不是吗？如果你使用 Webpack 的话，就不会这样。它支持开箱即用的代码分割特性。在这篇文章中我假定你熟悉 Webpack，但如果你不会的话，这里有一篇介绍 。为了长话短说，我们也将使用 AngularUI Router 和 ocLazyLoad 。
代码可以在 GitHub 上。你可以随时 fork 它。
Webpack 的配置
没什么特别的，真的。实际上从你可以直接从文档中复制然后粘贴，唯一的区别是采用了 ng-annotate ，以让我们的代码保持简洁，以及采用 babel 来使用一些 ECMAScript 2015 的魔法特性。如果你对 ES6 感兴趣，可以看看 这篇以前的帖子 。虽然这些东西都是非常棒的，但是它们都不是实现延迟加载所必需的东西。
// webpack.config.js var config = { entry: { app: ['./src/core/bootstrap.js'], }, output: { path: __dirname + '/build/', filename: 'bundle.js', }, resolve: { root: __dirname + '/src/', }, module: { noParse: [], loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'ng-annotate!babel' }, { test: /\.html$/, loader: 'raw' }, ] } }; module.exports = config;
应用
应用模块是主文件，它必须被包括在 bundle.js 内，这是在每一个页面上都需要强制下载的。正如你所看到的，我们不会加载任何复杂的东西，除了全局的依赖。不同于加载控制器，我们只加载路由配置。
// app.js 'use strict'; export default require('angular') .module('lazyApp', [ require('angular-ui-router'), require('oclazyload'), require('./pages/home/home.routing').name, require('./pages/messages/messages.routing').name, ]);
路由配置
所有的延迟加载都在路由配置中实现。正如我所说，我们正在使用 AngularUI Router ，因为我们需要实现嵌套视图。我们有几个使用案例。我们可以加载整个模块（包括子状态控制器）或每个 state 加载一个控制器（不去考虑对父级 state 的依赖）。
加载整个模块
当用户输入 /home 路径，浏览器就会下载 home 模块。它包括两个控制器，针对 home 和 home.about 这两个state。我们通过 state 的配置对象中的 resolve 属性就可以实现延迟加载。得益于 Webpack 的 require.ensure 方法，我们可以把 home 模块创建成第一个代码块。它就叫做 1.bundle.js 。如果没有 $ocLazyLoad.load ，我们会发现得到一个错误 Argument 'HomeController' is not a function, got undefined ，因为在 Angular 的设计中，启动应用之后再加载文件的方式是不可行的。 但是 $ocLazyLoad.load 使得我们可以在启动阶段注册一个模块，然后在它加载完之后再去使用它。
// home.routing.js 'use strict'; function homeRouting($urlRouterProvider, $stateProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider .state('home', { url: '/home', template: require('./views/home.html'), controller: 'HomeController as vm', resolve: { loadHomeController: ($q, $ocLazyLoad) => { return $q((resolve) => { require.ensure([], () => { // load whole module let module = require('./home'); $ocLazyLoad.load({name: 'home'}); resolve(module.controller); }); }); } } }).state('home.about', { url: '/about', template: require('./views/home.about.html'), controller: 'HomeAboutController as vm', }); } export default angular .module('home.routing', []) .config(homeRouting);
控制器被当作是模块的依赖。
// home.js 'use strict'; export default angular .module('home', [ require('./controllers/home.controller').name, require('./controllers/home.about.controller').name ]);
仅加载控制器
我们所做的是向前迈出的第一步，那么我们接着进行下一步。这一次，将没有大的模块，只有精简的控制器。
// messages.routing.js 'use strict'; function messagesRouting($stateProvider) { $stateProvider .state('messages', { url: '/messages', template: require('./views/messages.html'), controller: 'MessagesController as vm', resolve: { loadMessagesController: ($q, $ocLazyLoad) => { return $q((resolve) => { require.ensure([], () => { // load only controller module let module = require('./controllers/messages.controller'); $ocLazyLoad.load({name: module.name}); resolve(module.controller); }) }); } } }).state('messages.all', { url: '/all', template: require('./views/messages.all.html'), controller: 'MessagesAllController as vm', resolve: { loadMessagesAllController: ($q, $ocLazyLoad) => { return $q((resolve) => { require.ensure([], () => { // load only controller module let module = require('./controllers/messages.all.controller'); $ocLazyLoad.load({name: module.name}); resolve(module.controller); }) }); } } })
我相信在这里没有什么特别的，规则可以保持不变。
加载视图（Views）