使用Angular CLI进行Build(构建)和Serve详解

第一篇文章是: "使用angular cli生成angular5项目" :

第二篇文章是: "使用angular cli从蓝本生成代码" :

第三篇文章是: "使用Angular CLI生成路由" :

Build.

Build主要会做以下动作:

编译项目文件并输出到某个目录
Build targets决定了输出的结果
bundling 打包
生产环境的build还会进行uglify和tree-shaking(把没用的代码去掉)

ng build.

可以先看帮助:

针对开发环境,就是用命令 ng build.

默认情况下,它的输出目录在.angular-cli.json文件里ourDir属性配置的,默认是/dist目录.

build之后会看见dist里面有这些文件:

inline.bundle.js 这是webpack的运行时.
main.bundle.js 就是程序代码.
pollyfills.bundle.js 就是浏览器的Pollyfills.
styles.bundle.js 样式
vendor.bundle.js 是angular和第三方库

可以使用来分析依赖,并且查看哪些模块和类在bundle里面.

首先修改上一个例子中的代码:

执行ng build:

可以看到生成了这些文件.

把dist里面的index.html格式化一下看看:

可以看到它引用了生成的5个js文件.

打开main.bundle.js可以看到我写的代码:

下面运行程序: ng serve -o:

可以看到在ng serve的时候,加载了上述的文件.

因为ng build是开发时的build,所以没有做任何优化,文件挺大的.

那么这些文件是怎么被serve的呢?

这是因为,这时候webpack是在内存中进行的serve.

下面使用source-map-explorer进行分析,首先安装它:

rush:js;"> npm install --save-dev source-map-explorer

然后执行 ng build,再执行:

rush:plain;"> .\node_modules\.bin\source-map-explorer dist\main.bundle.js

结果会生成这个图形:

再看看vendor.bundle的情况:

rush:plain;"> .\node_modules\.bin\source-map-explorer dist\vendor.bundle.js

这里面东西就比较多了.

Build Targets和Environment.

Environment是指采用哪一个环境文件:

而Targets则是用来决定项目文件是如何被优化的.

看一下开发和生产build的对比.

ng build ng build --prod Environment environment.ts environment..prod.ts 缓存只缓存css里引用的图片所有build的文件 source maps 生成　不生成如何处理css 全局css输出到js文件生成的是css文件 uglify 不是 Tree-Shaking 不去掉无用代码去掉无用代码 AOT 不是 Bundling打包是是 --build-optimizer 否是(和AOT以及Angular5) --named-chunks 是否 --output-hashing media 所有

下面命令都是针对开发时的build,它们的作用是一样的:

rush:js;"> ng build ng build --dev ng build --dev -e=dev ng build --target=development --environment=dev

下面则是生产build:

rush:js;"> ng build --prod ng build --prod -e=prod ng build --target=production --environment=prod

其它常用的参数还有: