简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Angular CLI を使用したビルドと提供の詳細な説明

亚连
リリース： 2018-05-29 10:52:02
オリジナル
2051 人が閲覧しました

この記事では、Angular CLI を使用した Build と Serve の詳細な説明を中心に紹介しますので、参考にしてください。

Build.

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

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

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

  3. バンドルパッケージ

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

ng build.

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

ng build --help
ログイン後にコピー

開発環境の場合、コマンド ng build を使用するだけです。

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

ビルド後、これらのファイルが表示されます。 in dist:

  1. inline.bundle.js これはwebpackのランタイムです

  2. main.bundle.jsはブラウザのPollyfills.jsです。

    styles.bundle.js スタイル

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

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

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
ログイン後にコピー

中身はかなり異なります。詳細

ビルドターゲットと環境

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

そして、ターゲットはプロジェクトファイルがどのように構成されるかを決定するために使用されます。最適化されました。

開発と運用ビルドの比較を見てください。

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
ログイン後にコピー

其它常用的参数还有:

  1. --sourcemap -sm 生成source map

  2. --aot Ahead of Time编译

  3. --watch -w Watch并rebuild

  4. --environment -e Build环境

  5. --target -t Build target

  6. --dev 表示dev env和target

  7. --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. 已经一直在用了, 下面看看它常用的参数:

  1. --open -o 打开默认浏览器

  2. --port -p 端口

  3. --live-reload -lr 发生变化时重新加载网页(默认开启的)

  4. --ssl 使用https

  5. --proxy-config -pc 代理配置

  6. --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里面.

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Vue项目中如何引入icon图标

JavaScript中的E-mail 地址格式验证

javascript性能优化之分时函数的介绍

以上がAngular CLI を使用したビルドと提供の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
angular build 構築する
ソース：php.cn
前の記事：単体テストと E2E テストに Angular CLI を使用する方法 次の記事：Angular CLI を使用してルートを生成する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
注釈のないAngularアプリケーション これらの空のコメントやスペースを削除するための設定はありますか?私のビルドコマンドは ngbuild --environmentprod --progressfalse --tar...
から 2023-11-10 10:51:51
0
2
172
Vue.js 3 と Pinia Getters に関する問題 私は Angular から Vue.js に切り替えて、そのアーキテクチャを理解しようとしています。現在、基本的な問題に直面しており、多くの回避策を使用していますが、実際には一時的...
から 2023-11-03 18:52:56
0
1
244
JSX で '​​React' を使用する場合、それをスコープ act/react-in-jsx-scope に含める必要があります。 私は Angular 開発者で、React は初めてです。ここに単純な React コンポーネントがありますが、機能しません。 importreact,{Component}fro...
から 2023-09-18 19:58:41
0
2
303
Angular 11 と Google Maps API を使用したクラスターのクリック イベント処理 私はangular16プロジェクトに取り組んでいます。 this.markerCluster=newMarkerClusterer({map:this.map,markers:th...
から 2023-09-16 22:57:11
0
1
239
CSS border-radius により、この最小限の Angular マテリアル Sidenav コンポーネントで要素が消えるのはなぜですか? (デモが利用可能) AngularMaterialSidenav コンポーネントについてです。以下のコードでは、境界線の半径を大きくして、囲んでいる要素と重なるようにすると、要素が消えます。 <...
から 2023-09-15 20:15:02
0
1
730
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！