javascript - Angular1中使用了oclazyload,每路由下的子模块如何打包??
PHPz
PHPz 2017-04-11 11:40:00
[JavaScript讨论组]

1,使用了oclazyload做懒加载,但不知道如何在每个路由下打包子模块,如下app.js部分代码

angular.module('main', ['ui.router', 'oc.lazyLoad', 'CommonService'
    ])

.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
    function($stateProvider, $urlRouterProvider, $httpProvider) {
        $httpProvider.interceptors.push('HttpRequestInterceptor');
        $stateProvider
        .state('main', {
                url: '/',
                abstract: true,
                views: {
                  'lazyLoadView': {
                    controller: 'MainCtrl',
                    templateUrl: '/templates/layout.html',
                  }
                },
                resolve: {
                  loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        serie: true,
                        name: 'main',
                        files: ['/js/services/SystemUserService.js','/js/controllers/CommonController.js']
                    });
                  }]
                }
            })
        .state('login', {
            url: '/login',
            views: {
              'lazyLoadView': {
                controller: 'LoginCtrl',
                templateUrl: '/templates/page-login.html',
              }
            },
            resolve: {
              loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load({
                    name: 'main',
                    files: [
                    '/js/services/CommonService.js',
                     '/js/services/SystemUserService.js',
                      '/js/controllers/CommonController.js']
                });
              }]
            }
        })
            
     
            .state('main.map/show', {
                url: 'map/show',
                controller: 'MapCtrl',
                views: {
                  'layout': {
                    templateUrl: '/templates/page-map.html',
                  }
                },
                resolve: {
                  loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'main',
                        files: [
                        '/css/map.css',
                        '/js/services/StationService.js', 
                        '/js/services/DeviceService.js', 
                        '/js/controllers/MapController.js'
                        ]
                    });
                  }]
                }
            })

现在能按路由懒加载,但是,每个路由下要加载很多资源,想按照路由把资源打包下,这样进入该路由时,就不用发太多请求,有想过用webpack ,但不知道怎么做??

PHPz
PHPz

学习是最好的投资!

全部回复(1)
阿神

我也是用ui-route管理路由,在合并压缩时采用的grunt,当然webpack应该也没问题。

建议:

1.按模块管理代码,将某view所需的js放到一个文件夹下,发布时只需合并当前文件夹下的所有js文件

2.你代码中的service因为多处使用,可以不用按需加载,单独压缩合并services/文件夹下js文件,在index.html中加载上即可。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号