Tree-shaking और code splitting

Dead code को eliminate करना

Tree-shaking production mode में unused exports को remove करता है। यह identify करने के लिए ES6 module static structure पर rely करता है कि क्या imported है। Code splitting bundles को chunks में divide करता है जो on-demand load होते हैं।

Code splitting example

Separate chunks बनाने के लिए dynamic imports use करें।

// Load module only when needed
const handleClick = async () => {
  const { heavyModule } = await import('./heavy.js');
  heavyModule();
};

button.addEventListener('click', handleClick);

Output:

Creates: main.js, heavy.HASH.js (loaded on click)

Split chunks को optimize करें

splitChunks को configure करके vendor dependencies को separate bundles में extract करें। यह page updates के across vendor code को browser cache करने देता है।

त्वरित जाँच

त्वरित जाँच: Tree-shaking क्या है?

• Bugs find करने के लिए dependency tree को shake करना।
• Bundle से unused code को remove करना।
• Files में imports को reorder करना।
• Files के नाम छोटे करना।