Detailed explanation of Build and Serve using Angular CLI

This article mainly introduces the detailed explanation of Build and Serve using Angular CLI. Now I share it with you and give it as a reference.

Build.

Build will mainly do the following actions:

1. Compile the project file and output it Go to a certain directory

2. Build targets determine the output result

3. bundling packaging

4. Production The build of the environment will also perform uglify and tree-shaking (removing useless code)

ng build.

You can read the help first :

ng build --help

For the development environment, use the command ng build.

By default, its output directory is in .angular-cli. The ourDir attribute in the json file is configured, and the default is the /dist directory.

After building, you will see these files in dist:

1. inline.bundle.js This is webpack runtime.

2. main.bundle.js is the program code.

3. pollyfills.bundle.js is the browser’s Pollyfills.

4. styles.bundle.js Styles

5. vendor.bundle.js is angular and third-party library

You can use source-map-explorer to analyze dependencies and check which modules and classes are in the bundle.

First modify the code in the previous example:

Execute ng build:

You can see that these files are generated.

Change the index in dist. Format the html and take a look:

You can see that it refers to the 5 generated js files.

Open main.bundle.js and you can see The code I wrote:

Run the program below: ng serve -o:

You can see it in ng serve When, the above file was loaded.

Because ng build is a development build, no optimization has been done, and the file is quite large.

Looking at the file directory at this time, there is no dist directory:

So how are these files served?

This is because webpack is served in memory at this time.

Use source-map-explorer for analysis below. First install it:

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

Then execute ng build, and then execute:

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

The result will generate this graph:

Look at the situation of vendor.bundle:

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

There are more things here.

Build Targets and Environment.

Environment refers to which environment file is used:

And Targets is used to determine how the project file is optimized.

See Let’s compare development and production builds.

ng build ng build --dev ng build --dev -e=dev ng build --target=development --environment=dev

ng build --prod ng build --prod -e=prod ng build --target=production --environment=prod

ng build --aot

ng build --prod

ng serve --prod