关于angularJS 框架优化（按需加载），性能提升问题（grunt）。

工作闲暇之余，把学到的一些知识跟小伙伴们分享一下。

好，angularJS已经推出很长时间了，至于angularjs2.0到底是什么样的有咱们暂且不说，今天主要讨论一下angularJS的框架的构造问题。

至今为止，在单页的程序当中我看到的大多数引用js文件都是这样写的

公共文件

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>

controller文件

<script src="scripts/controllers/home.js" charset="utf-8"></script>
<script src="scripts/controllers/home/home.js" charset="utf-8"></script>

如果这个项目的业务逻辑很复杂、页面很多，controller文件也很多，那在index.html可能会有近百个这样东西，而启动项目加载的时候chrome Network 就会有近百个加载项（仅限于js文件），这些js文件加载的时候绝大多数是根本用不到的，也被事先加载了进来，这要也有好处，就是之后的操作会很流畅，因为已经加载进来了。

那么问题来了，第一次加载究竟需要多长时间呢，加载量有多大的？曾经做过一个项目就是业务很复杂的那种，很多控制都要在控制器中用js代码去做。时间可能也有网速的问题，但加载量是约2.5M，这个数字是很恐怖的，还好那个是公司内部使用所以这方面还是还是可以容忍的，但如果就用这种框架去做互联网的网站，还是移动端设备的，这是要疯啊。。。

那么问题又来了，怎么才能避免这种事情的发生呢?那就是按需加载。怎么实现按需加载，在框架中我用到了requirejs,

在我的项目中index.heml只有一个

<script src="assets/js/require.js" data-main="common/main.js?v=1.0"></script>

具体所要用到的js全在 main.js中

require.config({
    baseUrl: '',
    urlArgs: 'v=1.0',
    paths: {
             jquery' : 'assets/js/jquery.min',
           'angular' : 'assets/js/angular',

requirejs怎么去配置请参考 requirejs的相关文档。

目前到这起码在index.html中没有了很多的<script>...

到这里其实还没有实现按需加载的需求，接着看。

现在要给大家介绍一个好东西angular-couch-potato这个才是实现按需加载的关键。

用angular依赖注入angular-couch-potato的模块，

在路由中之前我们是这样写的

$stateProvider
    //首页
    .state('index', {
        url: '/index',
        views:{
            'main': {
                templateUrl: 'home/home.tpl.html',
                controller: 'HomeCtrl'
            }
        }
    })

并且还要把所有的controller文件全都写到route.js中，这种方式跟第一种是没有任何区别的，都是加载所有的js文件。

define(['app'], function(app) {
    'home/new.home.ctrl.js'

注：我用的ui-route不是angular-route所以有点小差距。

现在我们这样：

$stateProvider
    //首页
    .state('index', {
        url: 'index/',
        resolve: {
            dummy: $couchPotatoProvider.resolveDependencies(['home/home.ctrl'])
        },
        views:{
            'newmain': {
                templateUrl: 'home/home.tpl.html',
                controller: 'HomeCtrl'
            }
        }
    }) 

也不用在实现写好js文件的路径，这样在用到这个路由时，会自动的加载所需要的js文件，真正的实现按需加载。

那么问题再一次来临，这就ok了吗？这就实现了吗？

这就像玩游戏一样既要有输出，也要有辅助。哪我们是辅助是什么呢？没错就是神奇 grunt.其实在项目发布的时候都回去对效率进行处理的如后台的GZIP，那么前台我们就可以用grunt build命令，实现对js,css,html.等所有的文件进行压缩处理。

grunt用呢？请参考   点击打开链接

这样经过项目框架的优化，还有项目发布前的处理，可以大大提升网站的性能和效率。

注：本人只是刚刚入行的小菜鸟，这篇文章只是在对的工作中遇到的问题的一下总结，文笔不好请不要见怪（反正都是大白话。。。）不如之处还请小伙伴们多多指点。网上也有按需加载的其他文章，如angular-lazy等。方式不同，但效果都是一样的。