javascript - AngularJS:目录结构(例如模块化编程)会影响加载时间吗？

Question

模块化编程能否有助于缩短加载时间以及如何实现？

我阅读了有关模块化 AngularJS 应用程序的方法。一般来说，这样做的原因是在创建大型应用程序时拥有良好的结构，例如 does not have to scroll to much between files可重用模块和独立模块是分开的。

虽然从实际 Angular 来看这绝对有意义，但我几乎找不到支持加载时间的参数？

<小时/>

在单独的 .html 文件中引用 .js 文件而不是在 index.html 中引用所有 .js 文件会减少加载时间吗？

我在想以下内容；如果您的目录结构如下(目录结构示例)。如果您将 .js 引用包含在各个 .html 文件中而不是全部包含在 index.html 中，那么加载时间将会减少。例如，在 sidebarView.html 中，您可以添加:

<script src='sidebarDirective.js'></script>

<小时/>

目录结构示例

app/
----- shared/   // acts as reusable components or partials of our site
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
---------- article/
--------------- articleDirective.js
--------------- articleView.html
----- components/   // each component is treated as a mini Angular app
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
----- app.module.js
----- app.routes.js
assets/
----- img/      // Images and icons for your app
----- css/      // All styles and style related files (SCSS or LESS files)
----- js/       // JavaScript files written for your app that are not for angular
----- libs/     // Third-party libraries such as jQuery, Moment, Underscore, etc.
index.html

Answer 1

当您使用 Angularjs 构建单页应用程序时，最佳实践是将所有 javascript 连接并缩小到单个文件中，并在单个文件中预编译所有 html View 。然后您可以将它们直接包含到您的index.html 文件中。这意味着客户端只需发出两个网络请求即可获取应用运行所需的所有代码，并且在切换 View 时无需等待下载内容。

就我个人而言，我使用 gulp 来构建我的文件，但是有很多不同的构建系统。这是我的 gulpfile 中处理脚本构建的示例:

gulp.task('scripts', function() {
  return gulp.src(scripts)
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./build/scripts'))
    .pipe(refresh(lrserver));
});

gulp.task('customscripts', function() {
  return gulp.src(customscripts)
    .pipe(concat('app-custom.js'))
    .pipe(gulp.dest('./build/scripts'))
    .pipe(refresh(lrserver));
});

gulp.task('views', function() {
  return gulp.src(views)
    .pipe(minifyhtml({empty:true, spare: true, quotes: true, conditionals: true}))
    .pipe(rename(function(path) {
      path.dirname = '';
    }))    
    .pipe(html2js({moduleName: 'app', prefix: 'views/'}))
    .pipe(concat('app-views.js'))
    .pipe(gulp.dest('./build/scripts'))
    .pipe(refresh(lrserver));
});

然后在index.html文件中:

<script src="/scripts/app-custom.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/app-views.js"></script>

正如您所看到的，目录结构最终并不重要。就我个人而言，我转而使用模块化方法，发现对于较大的项目，保持组织和组件化要容易得多。