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

環境

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5触摸事件中如何判断用户滑动方向

css的新属性display:box使用方法