Webpack中Vendor条目是否会被Tree Shaking？及相关检测方法咨询

Great question—Tree Shaking and vendor chunking are common pain points when optimizing Webpack bundles, especially with ES module libraries like Material-UI. Let’s break this down clearly:

1. Do Vendor Entries Get Tree Shaken? #

Tree Shaking in Webpack relies on three key conditions:

• The code uses ES modules (not CommonJS, which can’t be statically analyzed for unused code).
• You’re running Webpack in mode: 'production' (this enables optimization.usedExports to track unused code, and optimization.minimize with Terser to remove it).
• You haven’t disabled critical optimizations like optimization.providedExports.

For vendor entries specifically:

• If you manually define a vendor entry with full library imports (e.g., entry: { vendor: ['@mui/material'] }), Webpack will likely treat this as a "full dependency" and skip Tree Shaking for that library—since you’re explicitly importing the entire thing, it assumes you need all of it.
• If you let Webpack handle vendor splitting automatically via optimization.splitChunks (instead of a manual vendor entry), it will analyze usage across all your entries, only include the parts of libraries that are actually used, and apply Tree Shaking as expected.

2. Material-UI in Multiple Entries: Tree Shaking Behavior #

Since Material-UI ships with ES modules, Tree Shaking will work if you structure your imports correctly, regardless of which entries use it:

• Use tree-shakable imports: Prefer import Button from '@mui/material/Button' over import { Button } from '@mui/material' (modern Webpack can handle both if the library is properly structured, but the former is more explicit about only pulling needed code).
• When using splitChunks, Webpack will extract the used Material-UI components into a shared vendor chunk. Any unused components across all entries will be shaken out.
• Avoid manually adding the full Material-UI library to a vendor entry—this forces Webpack to bundle the entire library, even if you only use a handful of components.

3. Verifying Tree Shaking with stats.json #

To confirm whether Tree Shaking is working for your vendor code, follow these steps:

Step 1: Generate the stats file #

Run Webpack with the --json flag to output detailed bundle metadata:

webpack --json > stats.json

Step 2: Analyze the results #

You have two straightforward options:

• Visual analysis with webpack-bundle-analyzer: Install the tool, then run:

  npx webpack-bundle-analyzer stats.json
  

  This opens a browser-based interactive map of your bundles. Look for @mui/material components in your vendor chunk—if only the components you’re using are present, Tree Shaking is working. If you see the entire library (hundreds of components), it’s not.
• Manual inspection of stats.json:
  • Search the modules array for entries containing @mui/material. Check the usedExports field—if it only lists the components you’ve imported, that’s a clear sign Tree Shaking is active.
  • Check the unusedModules array (available in Webpack 5+). Any Material-UI components listed here were successfully shaken out of your bundles.
  • Compare vendor bundle sizes before/after adjusting imports or splitChunks settings. A noticeable size drop when switching to tree-shakable imports confirms Tree Shaking is doing its job.

内容的提问来源于stack exchange，提问作者Victor Magalhães