Configure Tree Shaking in Rollup to Remove Unused JavaScript Code

Desired outcome

Reduce the size of a JavaScript bundle by having Rollup drop unused ES‑module exports (tree shaking) while preserving the application’s runtime behavior.

Prerequisites

• Node.js ≥14 installed.
• A project that uses ES‑module syntax (import/export) for at least one module.
• Basic familiarity with a terminal and npm/yarn.
• Rollup installed as a dev dependency (npm i -D rollup).

Procedure

1. Create a minimal example (if you don’t already have code):

   # src/utils.js
   export function used() { return 'kept'; }
   export function unused() { return 'removed'; }
   
   # src/main.js
   import { used } from './utils.js';
   console.log(used());
   

2. Add Rollup plugins (optional but common for resolving dependencies):

   npm i -D @rollup/plugin-node-resolve @rollup/plugin-commonjs
   

3. Create or edit the Rollup configuration file (rollup.config.js) in the project root:

   import { nodeResolve } from '@rollup/plugin-node-resolve';
   import commonjs from '@rollup/plugin-commonjs';
   
   export default {
     input: 'src/main.js',
     output: {
       file: 'dist/bundle.js',
       format: 'iife',          // immediately‑invoked function expression for browsers
       name: 'MyApp'
     },
     plugins: [nodeResolve(), commonjs()],
     // Enable tree shaking – the default is true for ES modules, but we make it explicit
     treeshake: {
       // Preserve side‑effects for modules that may need them (e.g., polyfills)
       moduleSideEffects: 'no-external'
     }
   };
   

4. Add a build script to package.json:

   "scripts": {
     "build": "rollup -c"
   }
   

5. Run the build:

   npm run build
   

6. Inspect the output (optional but recommended):

   # Show the bundle content
   cat dist/bundle.js
   

   You should see that the unused function is not present in the bundle.

Expected checks

• File size reduction: compare dist/bundle.js size before and after enabling treeshake. A noticeable drop (often 10‑50 % for small examples) indicates tree shaking worked.
• Visual verification: install rollup-plugin-visualizer and add it to the plugins array, then rebuild and open the generated report to confirm that unused (or whole utils.js if fully unused) is absent.
• Runtime test: run the application’s test suite or manually execute the bundle in a browser/Node environment to ensure the used functionality still works.

Limitations and cautions

• Dynamic imports (import()) are not analyzed for tree shaking; they remain in the bundle unless manually marked with side‑effect flags.
• Modules that rely on runtime‑evaluated property names (e.g., export [computed] = …) may be incorrectly considered unused and removed.
• Non‑ESM CommonJS modules processed via @rollup/plugin-commonjs expose all exports unless you declare side effects in package.json ("sideEffects": false) or mark individual files.
• Circular dependencies can break the analysis; try to refactor to eliminate cycles or set treeshake: { moduleSideEffects: false } as a guard for the problematic module.
• When using --watch, incremental builds may skip a full analysis, leaving dead code. Perform a full rebuild (rollup -c) after watching to verify.

Recovery options (rollback)

If the bundle size does not decrease or the application breaks after enabling tree shaking, revert the change:

1. Remove or set treeshake: false in rollup.config.js.
2. Re‑run the build: npm run build.
3. Confirm the bundle returns to its previous size and that the application works.

This rollback only affects the build output; source code remains unchanged.