Angular 5.2.6项目vendor.bundle.js过大加载缓慢，求优化及代码解析

First, let's break down what's inside that 11.6MB vendor.js file—it's the consolidated bundle of all external code your app relies on, specifically:

• Angular core framework code: This includes foundational modules like @angular/core, @angular/common, @angular/router, @angular/forms, plus all the underlying utilities Angular needs to run.
• Third-party libraries: Any npm packages you’ve installed for your project—think RxJS (bundled with Angular by default), UI toolkits like ngx-bootstrap or Angular Material, utility libraries like lodash or moment.js, or any other plugins you’re using.
• Polyfills: If your app targets older browsers (like IE11), vendor.js will also include polyfill code (from core-js, for example) to ensure compatibility with modern JavaScript features.

Now, let's dive into actionable steps to shrink this bundle and speed up your app's load time:

1. Always Use Production Build Mode #

Angular’s development build skips all optimizations to make debugging easier—run the production build command to enable automatic tree-shaking, minification, and code mangling:

ng build --prod

This alone should cut your vendor bundle size dramatically; dev builds keep uncompressed, unminified code that’s way bulkier than production-ready code.

2. Analyze Your Bundle to Pinpoint Bloat #

To see exactly which libraries are hogging space, generate a stats file with your production build:

ng build --prod --stats-json

Install webpack-bundle-analyzer locally (via npm install webpack-bundle-analyzer --save-dev) then visualize the bundle:

npx webpack-bundle-analyzer dist/stats.json

This opens a browser view showing each dependency’s size—you might find surprises like moment.js including every language locale, or lodash being fully bundled when you only use a handful of its methods.

3. Optimize Third-Party Dependencies #

• Tree-shake unused code: For libraries like lodash, use ES module imports instead of the full package:

  // Instead of import _ from 'lodash';
  import debounce from 'lodash/debounce';
  

• Trim locale files: For moment.js, use moment-locales-webpack-plugin to only bundle the locales you actually need (e.g., just en-US instead of 100+ locales).
• Swap heavy libraries: If a dependency is overly large, look for lighter alternatives—like using date-fns instead of moment.js, or luxon for date handling.

4. Implement Route Lazy Loading #

Split your app into feature modules and load them only when the user navigates to their route. This keeps those modules out of the initial vendor.js bundle. In your routing module:

const routes: Routes = [
  { 
    path: 'dashboard', 
    loadChildren: './dashboard/dashboard.module#DashboardModule' // Lazy load this module
  },
  // Other routes...
];

5. Trim Unnecessary Polyfills #

Open src/polyfills.ts and remove polyfills you don’t need. For example, if you don’t support IE11, you can comment out or delete core-js imports for ES6/ES7 features that modern browsers already support natively.

6. Enable Gzip Compression on Your Server #

Even with an optimized bundle, compressing it on the server will drastically reduce transfer size. Configure your web server (Nginx, Apache, etc.) to serve gzip-compressed versions of your JS/CSS files. A 11.6MB bundle can easily shrink to 3-4MB with gzip.

7. Deduplicate Dependencies #

Sometimes different third-party packages pull in duplicate versions of the same library. Run npm dedupe to merge duplicate dependencies into a single version, which reduces bundle size and eliminates redundant code.

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