Question

我正在开发一个庞大的Web应用程序（AngularJS和RequireJS），其中有很多JS文件。（如此多的控制器，过滤器，服务和许多第三方插件）。我面临的问题是，每次刷新应用程序时，我的应用程序都需要花费太多时间来下载所有文件（一次性）。我们可以使用任何策略来配置我们的需要JS，只需要下载所需的文件而不是所有文件吗？

目前我的Require JS以这种方式配置：

reqire.config({
 paths: {
  angular: '../../',
  jquery: '../../', .......
 }, shim: {
  bootstrap: {
   deps: ['jquery']
 }.........................
});

Answer 1

您可能还想查看ocLazyLoad以了解您的延迟加载需求 - link

一种策略是要求在ui-router的Resolve调用中加载插件。这将在尝试转换到视图/状态之前加载视图/状态所需的依赖项，并且具有promise意识以确保以正确的顺序加载所有内容。

.state('myState', {
          url: '/myState',
          template: '<div ui-view class="fade-in"></div>',
          resolve: {
            deps: ['$ocLazyLoad',
              function( $ocLazyLoad ){
                return $ocLazyLoad.load(['scripts/controllers/myController.js']);
            }]
          }
        })

如果需要，您也可以使用它来加载多个文件。

.state('ui.map.google', {
            url: '/google',
            templateUrl: 'views/ui/map/google.html',
            controller: 'GoogleMapCtrl',
            resolve: {
                deps: ['$ocLazyLoad',
                  function( $ocLazyLoad ){
                    return $ocLazyLoad.load( [
                        {
                          files: ['vendor/jquery/load-google-maps.js',
                                  'scripts/controllers/googlemap.js']
                        },
                        {
                          name:'ui.map',
                          files:['vendor/modules/angular-ui-map/ui-map.js']
                        }
                      ]).then(
                      function(){ 
                        return loadGoogleMaps(); 
                      }
                    )
                }]
            }
          })

你不需要在控制器中做任何特殊的事情来使这个工作，并且ocLazyLoad插件是非常可配置的（你可以设置清单/包等）。

如何制作RequireJS App Modular，即在旅途中下载文件，而不是一次下载

1 个答案: