5

1 ページ アプリの js ファイルを複数に分割する方法を探していました。このような：

plugins.js
open.js
closed.js
admin.js

したがって、ユーザーが最初のページをロードすると、plugins.js と open.js がロードされます。もう 1 つは、特定のページでのみ読み込まれます (閉じられたセクションや管理セクションなど、閉じられているため、他のページの後に読み込みます)。今日、私のアプリのすべてのユーザーは、重くて圧縮された javascript ファイル全体をロードします。

require.js を使用してそれを行うことはできますか? この種のアプローチへの参照は見つかりませんでした。

ありがとう。

4

5 に答える 5

3

require-lazyをご覧ください。これは機能しますが、当面はドキュメントが少し不足しているため、例を参照することをお勧めします。

簡単に言うと、オプティマイザー (r.js) の上にレイヤーを作成して、アプリケーションの分割ポイントを感知し、適切なバンドルを生成します。lazy!アプリケーション分割ポイントは、 AMD プラグインを使用して明示的に宣言できます。

define(["module1","lazy!module2"], function(m1,m2) {...});

上記の場合、module2ロードされていません。メソッドを持つオブジェクトがget()代わりに注入されます。module2が呼び出されたときにのみロードされm2.get()ます (promise を返します)。ビルド プロセスは、上記の場合に 2 つのバンドルを作成します。1 つはメイン ファイルを含み、module1.jsもう 1 つはmodule2.js.

モジュールを「検出」するためのメカニズムも実装しましたmodule-discovery。例を参照してください。

関連プロジェクト: require-lazy-grunt (間もなく離陸予定) およびangular-require-lazy。

于 2013-10-30T22:17:16.967 に答える
1

JS コードをいくつかの小さなファイルに分割できます。次に、各ページの<head>セクションに、関連する JS ファイルのみを含めます。

<head>
  ...
  <script type="text/javascript" src="plugins.js"></script>
  <script type="text/javascript" src="open.js"></script>
</head>

スクリプト ファイルを動的にロードするかどうかを本当に決定する必要がある場合は、RequireJSがその役割を果たします。使用方法については、Web サイトで詳しく説明されています。しかし、私が理解していることから、あなたの場合はやり過ぎです。

于 2013-10-30T22:36:57.383 に答える
0

この目的には、requireJS の代わりに Webpack を使用することをお勧めします。Webpack は、フロントエンド コードを一緒にコンパイルする目的で明示的に設計されています。つまり、多くのモジュールから単一の js ファイルを生成するために依存関係を取り込み、その後、各ページの必要に応じて複数のファイルに分割します。これは完全な 180 度の変更ではありません。(UMD および CommonJS と共に) AMD モジュールをすぐにサポートするため、requireJS 構文の大部分をそのままにしておくことができます。切り替えのプロセスはそれほど複雑ではありません。

ファイルの監視にも使用でき、ファイルの 1 つが変更されると自動的に再コンパイルされるため、コードの適切な分割が継続的に維持されます。

また、CSS と JS ファイル間の相互依存関係の処理、要求された shim のすべてのファイルへの挿入など、RequireJS 以外にも多くの非常に優れた機能を実行します。

余談ですが、Gulp 自動コンパイルワークフローに統合すると、 Webpack が特に強力になります。する必要はありません。組み合わせが特にうまく機能することがわかりました。

于 2015-09-04T19:53:30.273 に答える