如何缩减Angular 5中vendor/script bundle.js的体积？

Hey there! Let's break down how you can shrink those large code chunks and get deeper visibility into your bundle modules, since you've already got the basic production optimizations in place with ng build -prod -aot -vc -cc -dop --buildOptimize.

1. Strategies to Shrink or Split Large Code Chunks #

Lazy Load Feature Modules #

Angular's built-in route lazy loading is one of the most effective ways to split your bundle. Instead of loading all modules upfront, you can load them only when the user navigates to that route. Here's a quick example of how to set it up in your routing module:

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  },
  // Repeat for other large feature modules
];

This will split each lazy-loaded module into its own chunk, reducing the initial bundle size.

Optimize Third-Party Dependencies #

Large third-party libraries are often the culprit for bloated bundles. Try these fixes:

• Use smaller alternatives: Replace heavy libraries like moment.js with lighter options like date-fns or luxon.
• Import only what you need: For libraries like RxJS, import operators directly from rxjs/operators instead of the entire rxjs package. For example:

  // Good
  import { map, filter } from 'rxjs/operators';
  // Bad (loads entire RxJS)
  import * as rxjs from 'rxjs';
  

• Split vendor chunks: Customize your Angular build to split vendor libraries into separate chunks. Add a custom webpack config (using @angular-builders/custom-webpack) with splitChunks settings to isolate large vendors:

  module.exports = {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    }
  };
  

Double-Check Tree Shaking #

Even with AOT enabled, unused code might still slip through. Use tools like eslint-plugin-import with the no-unused-modules rule to catch unused imports, and ensure your third-party libraries are tree-shakable (look for ESM format support).

2. Tools for Deep Module Inspection #

If webpack-bundle-analyzer isn't giving you the granularity you need, try these alternatives:

source-map-explorer #

This tool lets you visualize exactly which files and functions contribute to each chunk by parsing source maps.

1. Install it globally: npm install -g source-map-explorer
2. Build your app with source maps: ng build --prod --source-map=true
3. Run the tool on your bundle: source-map-explorer dist/**/*.js
   You'll get an interactive map that shows you the breakdown of every file and dependency inside each chunk.

BundleStats #

BundleStats generates detailed bundle reports with size comparisons, chunk breakdowns, and even dependency tree analysis. It works great with Angular:

1. Install it: npm install --save-dev bundle-stats
2. Build your app with stats: ng build --prod --stats-json
3. Generate the report: bundle-stats generate dist/stats.json
   The report will show you deep insights into each module's size, including duplicate dependencies and unused code.

Fixing webpack-bundle-analyzer for Deep Inspection #

If you want to stick with webpack-bundle-analyzer, make sure you're generating the full stats file and using source maps:

1. Build with stats: ng build --prod --stats-json
2. Run the analyzer pointing to the stats file: webpack-bundle-analyzer dist/stats.json
   This should give you access to the full module breakdown, allowing you to drill into individual files within each chunk.

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