Setting the file. One moment.
Subchapter 8.29
references/option-tree-shaking.mdMarkdown5 KBView on GitHub
Tree shaking eliminates dead code (unused exports) from your final bundle, reducing size and improving performance.
Default: Enabled
# Tree shaking enabled (default)
tsdown
# Disable tree shaking
tsdown --no-treeshakeexport default defineConfig({
entry: ['src/index.ts'],
treeshake: true, // Default
})Source:
// src/util.ts
export function unused() {
console.log("I'm unused")
}
export function hello(x: number) {
console.log('Hello World', x)
}
// src/index.ts
import { hello } from './util'
hello(1)Output:
// dist/index.mjs
function hello(x) {
console.log('Hello World', x)
}
hello(1)unused() function is removed because it’s never imported.
Output:
// dist/index.mjs
function unused() {
console.log("I'm unused")
}
function hello(x) {
console.log('Hello World', x)
}
hello(1)All code is included, even if unused.
export default defineConfig({
treeshake: true,
})Uses Rolldown’s default tree shaking.
export default defineConfig({
treeshake: {
moduleSideEffects: false,
propertyReadSideEffects: false,
unknownGlobalSideEffects: false,
},
})See Rolldown docs (opens in a new tab) for all options.
export default defineConfig({
treeshake: false,
})Declare side effects in your package:
{
"sideEffects": false
}Or specify files with side effects:
{
"sideEffects": ["*.css", "src/polyfills.ts"]
}export default defineConfig({
treeshake: {
moduleSideEffects: (id) => {
// Preserve side effects for polyfills
return id.includes('polyfill')
},
},
})export default defineConfig({
entry: ['src/index.ts'],
format: ['esm', 'cjs'],
treeshake: true,
minify: true,
})export default defineConfig((options) => ({
entry: ['src/index.ts'],
treeshake: !options.watch, // Disable in dev
}))export default defineConfig({
entry: ['src/index.ts'],
treeshake: {
moduleSideEffects: (id) => {
return (
id.includes('.css') ||
id.includes('polyfill') ||
id.includes('side-effect')
)
},
},
})export default defineConfig({
entry: ['src/index.ts'],
format: ['esm'],
treeshake: true,
dts: true,
})Users can import only what they need:
import { onlyWhatINeed } from 'my-utils'During development to see all code:
export default defineConfig((options) => ({
treeshake: !options.watch,
}))Code with global side effects:
// This has side effects
window.myGlobal = {}
export function setup() {
// ...
}Disable tree shaking or mark side effects:
{
"sideEffects": true
}Include all code for coverage:
export default defineConfig({
treeshake: false,
})sideEffects in package.jsonsideEffects: true or list specific files// utils.ts - perfect for tree shaking
export function add(a, b) {
return a + b
}
export function multiply(a, b) {
return a * b
}
// Only 'add' imported = only 'add' bundled
import { add } from './utils'// polyfill.ts - has side effects
if (!Array.prototype.at) {
Array.prototype.at = function(index) {
// polyfill implementation
}
}
export {} // Need to export something{
"sideEffects": ["src/polyfill.ts"]
}