Tree shaking doesn't work with Typescript barrel files
Problem
Bug report I originally raised this as a discussion, but now I think it's a bug. Describe the bug When using a barrel file to re-export components from a single location, tree-shaking does not function correctly. To Reproduce I'm using Next 9.3.6 and I've arranged my components like: [code block] Each component file exports a single component, like this: [code block] index.ts is a barrel file that re-exports from each individual component file: [code block] I then use a couple of components in _app.tsx like: [code block] There's about 100 components defined, and only a couple are used in _app.tsx. But when I analyze the bundle I have a very large chunk, shared by all pages, and it contains all my components, resulting in an inflated app page size: <img width="748" alt="Screenshot 2020-05-06 09 35 32" src="https://user-images.githubusercontent.com/425787/81183292-f8bbdf00-8f7c-11ea-91c9-4b95adff907a.png"> I use a similar import strategy within pages, and every one of them appears to contain every component. my tsconfig.json is: [code block] and I'm using next's native support for the baseUrl field. I haven't changed the module or the target. When I change the _app.tsx imports to: [code block] the common bundle and app page size drops dramatically, as I would expect it to: <img width="751" alt="Screenshot 2020-05-06 09 34 21" src="https://user-images.githubusercontent.com/425787/81183384-1be68e80-8f7d-11ea-9aed-e32a1d871ab9.png"> Expected behavior The a
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Tree Shaking with Barrel Files in Next.js
Tree shaking fails with barrel files in TypeScript because the entire module is imported when the barrel file is used, preventing unused exports from being eliminated. This happens due to how ES modules are resolved and bundled, leading to inflated bundle sizes.
Awaiting Verification
Be the first to verify this fix
- 1
Refactor Barrel File Imports
Instead of importing components from the barrel file, import them directly from their respective files to enable tree shaking.
typescriptimport ComponentA from '../components/ComponentA'; import ComponentB from '../components/ComponentB'; - 2
Update tsconfig.json
Ensure that the 'module' option in your tsconfig.json is set to 'ESNext' or 'ES6' to support tree shaking effectively.
json{ "compilerOptions": { "module": "ESNext", "target": "ESNext", "baseUrl": "./" } } - 3
Analyze Bundle Size
After making the changes, use the Next.js bundle analyzer to check the size of your application and confirm that unused components are no longer included in the bundle.
bashnext build && next export && next analyze - 4
Test Application Functionality
Run your application to ensure that all components are functioning correctly after the refactor. Check for any runtime errors or missing components.
bashnpm run dev - 5
Document Changes
Update your project documentation to reflect the changes made to the import strategy and any updates to the tsconfig.json.
markdownUpdate README.md with new import guidelines.
Validation
Confirm that the bundle size has decreased significantly and that only the used components are included. Additionally, ensure that the application runs without errors after the changes.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep