Angularjs项目合并压缩

使用Angularjs搭的框架写的项目, 处于对性能的考虑,发布时候可以采用合并压缩方式,缩短请求时间,但也我觉得也并不是所有项目,所有代码都要压缩合并,并不见得有多大好处。

我合并压缩了所有的controller,在第一次加载页面时候会加载合并的js。然后在切换页面时就不需要做什么请求了。

可以使用工具JSCompress进行压缩合并,但是合并后要手动修改自己的配置路径。

至少路由那一块要修改哈。

刚开始没有头绪,以为只要把所有代码合并下,压缩下,就完事了。no no no

首先就是路由问题,每个页面都有controller,每个controller写在单独的一个js文件中,现在要做的就是合并。工具合并只是第一步,他会把所有的js写到一块,这样理论上可行,但是你现在运行时候就会发现各种错误。

下面做个简单的合并压缩的演示

原来 route.js下的路由:

 $stateProvider
      .state('home.a', {
          url: '/a',
          //controller: 'AController',
          templateUrl: 'views/common/a.html',
          resolve: lazyLoader.resovleDeps('controllers/common/a-controller')
      })
      .state('home.b', {
          url: '/b',
          //controller: 'BController',
          templateUrl: 'views/common/b.html',
          resolve: lazyLoader.resovleDeps('controllers/common/b-controller')
      })

a-controller.js or b-controller.js

(function(){
    define(['../module'],function(module){
        var myApp = angular.module(config.CONTROLLER_MODULE);
        myApp.controller('AController', [
            /*引入依赖*/
            ...
            function (...) {
                ...

            }]);

    })
})();

合并为 all-controller.js 同时也可以压缩为all-controller.min.js

(function(){
    define(['../module'],function(module){
        var myApp = angular.module(config.CONTROLLER_MODULE);
        myApp.controller('AController', [
            /*引入依赖*/
            ...
            function (...) {
                ...

            }]);

        myApp.controller('BController', [
            /*引入依赖*/
            ...
            function (...) {
                ...

            }]);
    })
})();

route.js 修改为

$stateProvider
      .state('home.a', {
          url: '/a',
          //controller: 'AController',
          templateUrl: 'views/common/a.html',
          resolve: lazyLoader.resovleDeps('controllers/common/all')
          //如果使用压缩文件 就改为  resolve: lazyLoader.resovleDeps('controllers/common/all.min')
      })
      .state('home.b', {
          url: '/b',
          //controller: 'BController',
          templateUrl: 'views/common/b.html',
          resolve: lazyLoader.resovleDeps('controllers/common/all')
      })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,107评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,314评论 25 709
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 5,581评论 0 3
  • 零基础学彩铅画。 心得:画图时候要用彩铅专用纸,不然纸会毛边。彩铅画考验耐心,零基础的我选择简单的图开始训练。 一...
    陈新如阅读 4,375评论 13 8
  • 玩卡不卡是马楠老师带领的平台,在这个平台上,到今天为止,我已经上过的课有,线下的《从零开始学OH卡》、《OH卡实操...
    艳敏_c9e0阅读 4,351评论 0 2

友情链接更多精彩内容