美文网首页
Angularjs项目合并压缩

Angularjs项目合并压缩

作者: 小学生的博客 | 来源:发表于2017-02-20 22:37 被阅读144次

使用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')
      })

相关文章

  • Angularjs项目合并压缩

    使用Angularjs搭的框架写的项目, 处于对性能的考虑,发布时候可以采用合并压缩方式,缩短请求时间,但也我觉得...

  • 项目构建

    项目构建 gulp 合并、编译、压缩等 简单 使用 webpack 合并、编译、压缩等 强大 使用

  • 网站性能优化

    1、资源压缩合并 (1)图片:雪碧图 (2)JS、CSS合并:利用项目构建工具webpack、grunt、gulp...

  • 前端的项目优化

    如何进行项目优化呢?1,文件合并 减少http请求,合并css js 文件2,文件体积压缩。利用webpack,G...

  • 面试汇总浏览器相关知识点

    前端性能优化方案? 减少页面体积,提升网络加载 静态资源的压缩合并(JS 代码压缩合并、CSS 代码压缩合并、雪碧...

  • 前端性能优化

    1. html压缩 2. css压缩,是否合并? 3. js压缩,是否合并? 4. 图片压缩,base64,雪碧图...

  • gulp-concat js-压缩并合并

    引入 gulp 模块 引入 uglify 压缩 模块 引入 js 合并模块 压缩 并 合并 js文件

  • 自动化构建工具

    gulp webpack grunt gulp--构建项目,压缩合并处理,依赖于 gulpfile.js...

  • 性能优化总结

    资源的合并与压缩 核心:减少http请求数量(合并)减少资源请求大小(压缩) html压缩:压缩这些在文本文件中有...

  • 2018-03-23

    1.你项目都有做哪些性能优化图标合并 少用绝对定位 图片压缩 代码压缩 尽量少操做dom 少用大幅度动画...

网友评论

      本文标题:Angularjs项目合并压缩

      本文链接:https://www.haomeiwen.com/subject/wluewttx.html