Angular CLI がビルドを実装する方法

今回は、Angular CLI が Build を実装する方法と、Angular CLI が Build を実装する際の注意点について説明します。以下は実際のケースです。

Build.

Buildは主に以下の動作を行います:

1. プロジェクトファイルをコンパイルし、特定のディレクトリに出力します

2. 出力結果を決定するビルドターゲット

3. バンドルパッケージ

4. 本番環境のビルドでは、uglify と Tree-shaking (無駄なコードの削除) も実行されます

ng build.

最初にヘルプを確認できます:

ng build --help

開発環境の場合は、コマンド ng build

デフォルトでは、その出力ディレクトリは .angular-cli.json ファイルの ourDir 属性で構成されます

ビルド後、次のファイルが表示されます。

1. inline.bundle.js

2. main.bundle.js はブラウザの Pollyfills.bundle です。 .js スタイル

3. vendor.bundle.js は Angular およびサードパーティのライブラリです

4. source-map-explorer を使用して依存関係を分析し、バンドルに含まれるモジュールとクラスを確認できます。
   最初に変更します前の例のコード:
Execute ng build:

これらのファイルが生成されたことがわかります。

dist でindex.html をフォーマットして見てください:

生成された 5 つの js ファイルを参照していることがわかります。

main.bundle.js を開くと、私が書いたコードが表示されます:

以下のプログラムを実行します: ngserve -o:

ngserve がロードしているときに、上記のファイルが表示されていることがわかります。

ng build は開発ビルドであるため、最適化は行われておらず、ファイルは非常に大きいです。

次に、ファイル ディレクトリを見てください。 dist ディレクトリ:

次に、これらのファイルはどのように提供されますか?

これは、現時点では Webpack がメモリ内で提供されているためです。

以下の分析には、source-map-explorer を使用してください。まず、それをインストールします:

npm install --save-dev source-map-explorer

。

それから ng build を実行し、次のコマンドを実行します:

.\node_modules\.bin\source-map-explorer dist\main.bundle.js

その結果、次のグラフが生成されます:

vendor.bundle の状況を見てください:

.\node_modules\.bin\source-map-explorer dist\vendor.bundle.js

そこにはさらに多くのものがあります。

Buildターゲットと環境。

環境は、どの環境ファイルが使用されるかを参照します。

そして、ターゲットは、プロジェクト ファイルがどのように最適化されるかを決定するために使用されます。開発ビルドと本番ビルドの比較を見てください。

CSSの扱い方uglifyツリー-シェイクでは無駄なコードは削除されませんAOTいいえバンドルバンドルは -- build-optimizerいいえ --named-chunksはい--出力 - ハッシュメディア

	ng build	ng build --prod
環境	environment.ts	環境..prod.ts
キャッシュ	CSSで参照される画像のみをキャッシュ	すべてのビルドファイル
ソースマップ	生成しない
jsファイルへのグローバルCSS出力	生成されたCSSファイル
ではありません
無駄なコードを削除
はい
は
はい (AOT と Angular5 を使用)
いいえ
すべて	下面命令都是针对开发时的build, 它们的作用是一样的: ng build ng build --dev ng build --dev -e=dev ng build --target=development --environment=dev 下面则是生产build: ng build --prod ng build --prod -e=prod ng build --target=production --environment=prod 其它常用的参数还有: --sourcemap -sm 生成source map --aot Ahead of Time编译 --watch -w Watch并rebuild --environment -e Build环境 --target -t Build target --dev 表示dev env和target --prod 表示prod env和target Production Build. 先使用--aot: ng build --aot 使用aot之后可以看到 vendor.bundle的大小降了很多, 只有1.5m左右了. 执行aot会去掉一些程序执行不需要的代码, 例如angular的compiler这时就不在build输出的文件里了(可以使用source-map-explorer查看). 试试生产环境: ng build --prod 可以看到所有的文件都非常小了, 并且没有vendor了(因为prod下--build-optimizer起作用所以vendor没有了, 但可以使用--vendor-chunk true给弄出来). Serve. ng serve. 已经一直在用了, 下面看看它常用的参数: --open -o 打开默认浏览器 --port -p 端口 --live-reload -lr 发生变化时重新加载网页(默认开启的) --ssl 使用https --proxy-config -pc 代理配置 --prod 在内存中serve 生产模式build的文件 试试 --prod: ng serve --prod 通过文件大小可以看出确实是prod build的. ng eject. 为项目生成webpack配置和脚本. 执行该命令试试: 看看有哪些变化: .angular-cli.json: package.json: 命令脚本都变了 还多出来一个webpack.config.js文件: 为什么要这么做呢? 可以对项目更深入的配置.... 这时运行程序就是 npm start了. 我还是把reject恢复回去吧, 使用git来恢复吧. 如果需要Serve 其他js/css/assets文件: 放在.angular-cli.json就行, 例如jquery就应该放在scripts里面. 相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！ 推荐阅读： H5触摸事件中如何判断用户滑动方向 css的新属性display:box使用方法

以上がAngular CLI がビルドを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。