目前工作项目中遇到一个很大的问题，就是app首屏渲染速度过慢，app是原生webview嵌套angular（SPA单页应用）开发的。为了解决这个问题准备从三方面入手：
- 服务端压缩传输内容（利用javaweb Filter 实现gzip压缩）
- android端，自定义webview缓存，启动app时如果服务端未发生改变，直接从android本地加载html。
- 实现angular 按需加载Controller和Template
今天主要给大家说明如何实现angular按需加载。由于我们工作环境使用的是angular1 ，因此采用angular+angular-ui-router+angularAMD +requirejs来实现。
require.js 文档：我比较喜欢阮一峰老师的网站，链接如下：http://www.ruanyifeng.com/blog/2012/11/require_js.html
angular-ui-router：https://github.com/angular-ui/ui-router
angularAMD:https://github.com/marcoslin/angularAMD
下面具体工程结构如下：
其中index.html 使我们的SPA工程页面。js文件夹是我们需要的js类库文件，controller是我们的angular控制器目录，template使我们的angular模板目录。
由于浏览器的同源策略，为了展示我们的结果，需要安装：
npm install live-server -g
首先index.html如下,引入requirejs 来控制加载模块：
<html>
<head>
<script src="js/require.js" data-main="main.js"></script>
</head>
<body>
<div >
<h1>world</h1>
<a ui-sref="index">首页</a>
<a ui-sref="index2">第二页</a>
<ui-view></ui-view>
</div>
</body>
</html>
main.js 配置进行requirejs。代码如下：
/** require js 入口 */
require.config({
baseUrl: '',//根目录
// 模块对应的路径
paths:{
'angular':'js/angular',
'angular-route': 'js/angular-route',
'angularAMD':'js/AMD/angularAMD',
'angularUiRouter':'js/angular-ui-router'
},
// 不兼容模块，有些模块必须在前一个模块加载完成之后，才可加载
shim:{
'angular':{ exports: "angular" },
'angularAMD':['angular'],
'angular-route':['angular'],
'angularUiRouter':['angular']
},
// 加载完成之后执行app.js
deps:['app']
})
app.js 如下：
define([
'angularAMD',
'angularUiRouter'
], function(angularAMD) {
var app = angular.module('webapp',['ui.router'])
app.config(($stateProvider, $urlRouterProvider)=>{
$urlRouterProvider.otherwise('/index')
$stateProvider.state("index", angularAMD.route({
url: "/index",
templateUrl: "template/index.html",
controllerUrl: "controllers/indexController.js"
}))
.state("index2", angularAMD.route({
url: "/index2",
templateUrl: "template/index2.html",
controllerUrl: "controllers/indexController1.js"
}))
})
// 初始化时进入index 状态
app.run(function($state) {
$state.go('index');
});
return angularAMD.bootstrap(app)
});
上面就是完成了配置，现在我们利用live-server来运行我们的网页：
打开谷歌浏览器，我们可以看到，我们只加载了index.html,indexController.js ,并没有加载我们路由中配置的indexController1.js，index2.html：
然后点击我们的第二页，这时发现我们才会加载indexController1.js，index2.html。实现了按需加载。
