0

モジュール式プログラミングは読み込み時間の短縮に貢献できますか?またその方法は?

AngularJS アプリケーションをモジュール化する方法について読みました。一般に、そうする理由は、大規模なアプリを作成するときに、ファイル間をあまりスクロールする必要がなく、再利用可能なモジュールとスタンドアロン モジュールが分離されるような適切な構造を持つためです。

これは実用的な観点からは確かに理にかなっていますが、読み込み時間をサポートする引数をほとんど見つけることができませんか?

index.html 内のすべてではなく、個別の .html ファイル内の .js ファイルを参照すると、読み込み時間が短縮されますか?

私は次のことを考えていました。以下のようなディレクトリ構造を持っている場合 (ディレクトリ構造の例)。すべてのファイルではなく.js個々のファイルに参照を含めると、読み込み時間が短縮されます。たとえば、l に次のように追加します。.htmlindex.htmlsidebarView.htm

<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
4

1 に答える 1

4

Angularjs を使用して単一ページのアプリを構築する場合のベスト プラクティスは、すべての JavaScript を単一のファイルに連結して縮小し、すべての html ビューを単一のファイルにプリコンパイルすることです。その後、これらを index.html ファイルに直接含めることができます。つまり、クライアントは、アプリの実行に必要なすべてのコードを取得するために 2 つのネットワーク リクエストを行うだけでよく、ビューを切り替えるときにダウンロードを待つ必要はありません。

個人的には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>

ご覧のとおり、結局のところ、ディレクトリ構造はまったく問題になりません。個人的に私はモジュラー アプローチを使用するように切り替えましたが、大規模なプロジェクトでは、整理とコンポーネント化を維持するのが非常に簡単であることがわかりました。

于 2014-12-19T09:37:31.043 に答える