What is Tree Shaking Analyzer
The Tree Shaking Analyzer is a client-side tool that counts and categorizes import and export statements in JavaScript or TypeScript code, providing insights into how well the codebase supports tree shaking. Tree shaking is a bundler optimization that eliminates dead code — code that is exported from a module but never imported elsewhere. For tree shaking to work effectively, modules should prefer named exports over default exports, because bundlers can statically determine which named exports are used and remove unused ones. Default exports are harder to tree-shake because the bundler must analyze whether the entire default export value is used. The tool parses the input line by line, counts total exports, total imports, named exports (export const/function/class declarations), and default exports (export default), then provides a summary with a practical recommendation: use more named exports to improve tree-shaking effectiveness. The tool is language-agnostic — it searches for the export and import keywords regardless of whether the input is JavaScript, TypeScript, JSX, or TSX. This means you can paste the combined exports from an entire module directory to get an aggregate view of your export patterns.
How to Use Tree Shaking Analyzer
- Step 1: Paste the import and export statements from your JavaScript or TypeScript module into the input textarea. Each statement should be on its own line.
- Step 2: Click Transform. The tool counts and categorizes each statement.
- Step 3: The output shows the totals: export statements, import statements, named exports, and default exports, followed by a tree-shaking recommendation.
- Step 4: Use the counts to assess whether your module is tree-shakeable: a high ratio of named exports to default exports is ideal.
Why Use Tree Shaking Analyzer
Tree shaking is one of the most effective bundle size optimizations, but its effectiveness depends on how modules are structured. Many developers inadvertently harm tree-shaking by using default exports for everything, which forces bundlers to include the entire module even if only one function is used. The Tree Shaking Analyzer makes this visible: if you paste a module and see 20 exports but only 1 is named and 19 are default, you know immediately that tree shaking will be ineffective. The tool is also useful for auditing third-party libraries — paste their index.d.ts or index.js export list to see how many named exports are available for selective importing.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.
Frequently Asked Questions
Does this tool perform actual tree shaking?
<p>No. It analyzes the structure of your import/export statements and provides guidance. Actual tree shaking is performed by bundlers (Webpack, Rollup, esbuild) during the build process.</p>
What about re-exports (export * from)?
<p>The tool counts export * statements as export statements but does not analyze their transitive effects. For full tree-shaking analysis, you would need a bundler's output or a tool like Webpack Bundle Analyzer.</p>
Does this apply to React components?
<p>Yes, and it is particularly relevant for component libraries. Named exports like export { Button } allow bundlers to include only Button, while export default Button forces inclusion of the entire module.</p>
What about re-exports (export * from)?
<p>The tool counts export * statements as export statements but does not trace their transitive effects. For a complete tree-shaking analysis, use your bundler's visualization plugin.</p>