5

私は非常に単純な Angular 2 アプリケーションを使用しており、Angular CLI を使用していません (この特定の質問のために、CLI の使用を提案しないでください)。JIT コンパイラを使用すると、サイトは問題なく実行されます。熱心にロードされたモジュールと遅延ロードされたモジュールはまったく問題ありません。

Angular 2のドキュメント で概説されているように、AOT コンパイラを正常に実行してから、Rollup を使用してツリー シェーキングを実行できます。これを行うと、熱心にロードされたモジュールに対してサイトは問題なく実行されますが、熱心にロードされたモジュールに移動しようとするとエラーが発生します。エラーメッセージは次のとおりですGET http://atticus.local/app/contacts/contacts.module.ngfactory 404 (Not Found)（これは、遅延ロードしようとしているモジュールです）

開始するための非常に基本的な質問:

  • AOT とツリー シェーキングを実行しているときに遅延読み込みを使用することは理にかなっていますか? それでも恩恵を受けられますか？

上記の質問に対する答えが「はい」であると仮定すると、どうすれば AOT コンパイルと遅延読み込みを連携させることができるのでしょうか? Angular CLI の GitHub の問題で、この質問が提起されていることを確認しましたが、何らかの解決策が導入されたようです。これは、CLI を使用していることを前提としていますが、私は使用していません。*.ngfactory.tsAOT を実行したときの出力で、遅延ロードされたモジュールに対して作成されたものも作成されていないことにも気付きましたが*.ngsummary.json、積極的にロードされたモジュールに対してのみ作成されました。どちらが理にかなっていますか？

参考までに、AOT 用に実行したコマンドngc -p tsconfig-aot.jsonは次のとおりです。tsconfig-aot.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "es2015",
            "dom"
        ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "typeRoots": [
            "node_modules/@types/"
        ]
    },
    "files": [
        "app/app.module.ts",
        "app/main-aot.ts"
    ],
    "angularCompilerOptions": {
        "genDir": "aot",
        "skipMetadataEmit": true
    }
}

次にrollup -c rollup-config.js、ロールアップを実行して、ツリーの揺れを実行しました。は次のrollup-config.jsとおりです。

import rollup from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify'

//paths are relative to the execution path
export default {
    entry: 'app/main-aot.js',
    dest: 'aot/dist/build.js', // output a single application bundle
    sourceMap: true,
    sourceMapFile: 'aot/dist/build.js.map',
    format: 'iife',
    plugins: [
        nodeResolve({ jsnext: true, module: true }),
        commonjs({
            include: ['node_modules/rxjs/**']
        }),
        uglify()
    ]
}

もっと情報を提供できるか、もっと明確にできるかどうか教えてください。ありがとうございました！

4

1 に答える 1

2

rollup はまだコード分割をサポートしていません。これはそのためのgithubの問題です。

これは、webpack を使用して実現できます。コード分​​割、遅延読み込み、および Treeshaking をサポートしています。

AOT とツリー シェーキングを実行しているときに遅延読み込みを使用することは理にかなっていますか? それでも恩恵を受けられますか？

なぜだめですか？最初のモジュールのみをロードする必要があるため、アプリケーションの開始時間を短縮できます。ただし、適切な Preloadingstrategy を使用して、他のものを遅延して自動的にロードできます。

BR ファビアン

于 2017-03-14T07:28:59.437 に答える