Angular 5アプリケーションでは、サーバーにアプリケーションを初めてロードするときに時間がかかります。詳細については、本番環境でAOTコンパイラを使用しています。
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": ["node_modules/@types"],
"lib": ["es2017", "dom"]
}
}
最初の負荷を最適化する方法はいくつかあります。
1：ビルドオプション
ビルドの--prod
2：遅延読み込み
lazyLoadingを使用するには、アプリケーションをリファクタリングする必要があります。Angularでは、lazyloadは必要に応じてモジュールをロードするアプローチです。そのため、最初のロードでロードされるコードが少なくなり、ユーザーが他のルートに移動すると、必要なチャンクファイルがロードされます。lazyLoadingの公式ドキュメントを探す
3：必要なものをインポートする
必要な機能のみをインポートします。例：lodash
の代わりに
import * as _ from "lodash";
使用する
「lodash」から{toLower}をインポートします。
4：CDN
CDN（CloudFront / s3）を使用してアセット（静的ファイル）をロードします。
5：動的スクリプトの読み込み
index.htmlファイル内のすべてのスクリプトをロードしないでください。代わりに、必要に応じて個別のコンポーネントに動的にロードします
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加