Question

模块化编程能否有助于缩短加载时间和方式？

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

虽然从实际角度来看这绝对有道理，但我几乎找不到支持加载时间的论据？

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

我在考虑以下事项;如果您有如下目录结构（目录结构示例）。如果您包含单个.js文件中的.html引用而不是index.html中的所有引用，则加载时间将会减少。例如，在sidebarView.htm l中，您将添加：

<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视图。然后，您可以将这些直接包含在index.html文件中。这意味着客户端只需要发出两个网络请求即可获得运行应用程序所需的所有代码，并且在切换视图时无需等待下载内容。

就个人而言，我使用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>

正如您所看到的，目录结构在一天结束时根本不重要。我个人转而使用模块化方法，发现对于大型项目来说，更容易保持组织和组件化。

AngularJS：目录结构（例如模块化编程）会影响加载时间吗？

1 个答案: