目前网站的全部js和css通过gulp打包成一个大文件，angularjs又不支持异步加载模块代码。

就出现了这么一种情况，就是打开首页的时候要把全部的js和css资源请求到，首页加载的非常的慢，半天都显示不出来。这个问题对网站来说就非常的致命了。

以前我做个代码的压缩，但是治标不治本，以后模块越多，打包的文件越来越大，所以我抽空就写了这么个解决方案(按需加载)。

需要解决什么问题？

答：解决网站首页加载慢的问题。

是什么原因导致首页加载慢？

答：全站的资源都打包在一起，加载首页的时候，全站的资源都加载了，所以导致首页加载慢。

文件名 大小 加载时间 备注
vendor.css 845kb 157ms 插件css
vendor.js 5.3mb 1.14s 插件js
main.css 662kb 217ms 业务css
app.js 5.4mb 1.24s 业务js

以上的代码，做过一定的压缩。（并未完全压缩，因为代码不规范，压缩不了）

如果还是以这种方式加载资源，打包的代码会越来越庞大。现在大概需要4到5s的加载时间，以后10s才加载出来都是有可能的。

如何解决这个问题？

答：网站资源和第三方插件js和css文件不要打包成一个文件，按需加载（哪里需要就在哪里加载） 即可解决这个问题。

那么，具体该如何操作呢？

准备工作：安装$oclazyload 插件， 

1
bower install oclazyload --save

为什么要使用这个插件？

答：这是angularjs资源按需加载插件，专门解决按需加载文件需求。

文档手册：https://oclazyload.readme.io/

使用方法：

1、添加$oclazyload模块到项目中

1
var myApp = angular.module("MyApp", ["oc.lazyLoad"]);

2、在app.module.js中配置

1
2
3
4
5
6
.config(['$ocLazyLoadProvider', function ($ocLazyLoadProvider) {
    $ocLazyLoadProvider.config({
      debug: true, //调试模式
      events: true，//广播事件
     });
 }])

3、在router中使用，我以naturePlus模块举例。naturePlus.status.js配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//新建
.state('naturePlusAdd', {
  url: '/naturePlus/add',
  templateUrl: 'app/naturePlus/add/index.html',
  /*
   * 下面是路由的依赖资源，
   * 可以看出来：页面依赖第三方插件bootstrap-tagsinput和一些公共的代码
   */
  resolve: {
    deps: ['$ocLazyLoad', function ($ocLazyLoad) {
      return $ocLazyLoad.load([
        //模块代码
        'app/naturePlus/naturePlus.service.js',
        'app/naturePlus/naturePlus.factory.js',
        'app/naturePlus/naturePlus.directive.js',
        'app/naturePlus/naturePlus.filter.js',
        'app/naturePlus/add/add.controller.js',
        //插件代码
        'bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css',
        'bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.js'
      ]);
    }]
  }
})
.state('...')

以上就完成了代码的改造，这样访问页面才会加载这个页面需要的资源，尽情的撸代码吧!

桥豆麻袋，桥豆麻袋。。。

开发的时候这样改造，但是打包的时候还是打包成一个文件，这不是没改吗？

是的，我们下一步，就是对gulp打包流程的改造。

那么，gulp打包流程该如何改造呢？

1、第三方插件

查找项目下引用的是bower_components中的js和css文件。即：路由ocLazyLoad.load()按需加载的 bower_components 插件，拷贝到dist目录下bower_component文件夹下面。

2、关于预编译文件

如果是scss编译成css，其他模版文件编译成浏览器可识别的文件，压缩后，放到dist相应的文件夹下面即可。

3、imgae、js和html

文件压缩，拷贝文件到dist相应的目录即可。

到此，开发和打包改造完成！

总结：虽然按需加载会损耗一部分性能（打开新页面再去请求资源），但是能解决目前首页加载慢的问题和打包越来越大的问题。

这种方式改动极小，只需要改造页面的路由手动添加依赖，能解决问题相应的问题。