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

83 阅读 0 评论 55 点赞

我是靠谱客的博主俏皮冥王星，这篇文章主要介绍关于angularJS 框架优化（按需加载），性能提升问题（grunt）。，现在分享给大家，希望可以做个参考。

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

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

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

公共文件

复制代码

1
2
3
4
5
<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文件

复制代码

1
2
<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只有一个

复制代码

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

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

复制代码

1
2
3
4
5
6
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的模块，

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
$stateProvider
    //首页
    .state('index', {
        url: '/index',
        views:{
            'main': {
                templateUrl: 'home/home.tpl.html',
                controller: 'HomeCtrl'
            }
        }
    })

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

复制代码

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

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

现在我们这样：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$stateProvider
    //首页
    .state('index', {
        url: 'index/',
        resolve: {
            dummy: $couchPotatoProvider.resolveDependencies(['home/home.ctrl'])
        },
        views:{
            'newmain': {
                templateUrl: 'home/home.tpl.html',
                controller: 'HomeCtrl'
            }
        }
    })