common.chunk.js是什么？Angular 5项目打包出现该文件的疑问

Hey there! Let me break down exactly what that common.chunk.js file is doing in your Angular 5 app built with angular-cli 1.6.6.

What it actually is #

This file is an automatic output of the code-splitting logic built into the webpack setup that angular-cli 1.6.6 uses (webpack 3 under the hood). Here's the core idea:

• When you have multiple lazy-loaded route modules in your app, webpack scans through all of them to find code that's shared across two or more of these lazy chunks.
• Instead of bundling that shared code into every single lazy chunk (which would bloat your app size), it extracts that duplicate code into common.chunk.js so it only loads once, no matter which lazy route the user visits first.

Why it's separate from vendor/main/polyfill #

It's easy to confuse this with the other chunks, but each has a distinct job:

• vendor.chunk.js: Holds all third-party dependencies (like Angular core, RxJS, lodash, etc.) that your entire app uses.
• main.chunk.js: Contains your app's root module and all non-lazy-loaded code (the parts that load immediately when the app starts).
• polyfill.chunk.js: Includes browser compatibility shims to support older browsers.
• common.chunk.js: Only focuses on shared code between your lazy-loaded modules—think shared components, services, utility functions, or even small pieces of third-party code that only your lazy modules use together.

How to see exactly what's in it #

If you want to dig deeper and verify what code ended up in this chunk, try these steps:

1. Run ng build --stats-json—this generates a stats.json file in your dist folder with detailed bundle info.
2. Install the webpack-bundle-analyzer tool locally (npm install webpack-bundle-analyzer --save-dev).
3. Run npx webpack-bundle-analyzer dist/stats.json—this opens a visual map of all your bundles, letting you click into common.chunk.js to see every module it contains.

内容的提问来源于stack exchange，提问作者rocketer