How Angular CLI implements Build

This time I will show you how Angular CLI implements Build, and what are the precautions for Angular CLI to implement Build. The following is a practical case, let's take a look.

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 configured in the ourDir attribute in the .angular-cli.json file, and the default is /dist Directory.

After building, you will see these files in dist:

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

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

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

4. styles. bundle.js style

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.

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

You can see that it references 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 that the above file is loaded during ng serve.

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

Now look at the file directory, 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 below To analyze, first install it:

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

Then execute ng build, then execute:

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

The result will generate this graph:

Let’s look at the situation of vendor.bundle:

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

There are more things in it.

Build Targets and Environment.

Environment refers to which environment file is used:

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

Look at the comparison between 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

The above is the detailed content of How Angular CLI implements Build. For more information, please follow other related articles on the PHP Chinese website!