இரண்டும் பயனர்கள் download செய்யும் JavaScript-ஐ குறைக்கின்றன. Code splitting bundle-ஐ தேவைக்கேற்ப load செய்யப்படும் chunk-களாகப் பிரிக்கிறது; tree shaking நீங்கள் ஒருபோதும் பயன்படுத்தாத code-ஐ அகற்றுகிறது. அவை பரஸ்பரம் நிரப்பும்: எது load ஆகிறது என்பதைப் பிரியுங்கள், ஒவ்வொரு chunk-க்குள்ளும் dead code-ஐ shake out செய்யுங்கள்.
ஒரு பெரிய bundle-க்குப் பதிலாக, ஒவ்வொரு route அல்லது கனமான feature ஒரு தனி chunk-ஆக தேவைப்படும்போது மட்டுமே fetch செய்யப்படும்படி app பிரிக்கப்படுகிறது:
// Route-based split: the dashboard code isn't downloaded until you visit it
const Dashboard = lazy(() => import("./routes/Dashboard")); // its own chunk
// Component-based split: heavy editor loaded on interaction
button.onclick = async () => {
const { openEditor } = await import("./editor"); // fetched on click
openEditor();
};
dynamic import()-தான் signal — bundler அந்த boundary-இல் ஒரு தனி file-ஐ emit செய்கிறது.
bundler, ES module import/export-ஐ static-ஆக பகுப்பாய்வு செய்து எதுவும் குறிப்பிடாத export-களை drop செய்கிறது. இது ESM-உடன் மட்டுமே (static, analyzable) வேலை செய்கிறது — CommonJS require-உடன் அல்ல:
import { debounce } from "utils"; // only debounce is kept; throttle, etc. are shaken out
இது package.json-இல் "sideEffects": false மற்றும் per-function import-களைச் சார்ந்துள்ளது; barrel file-கள் அல்லது side-effect கொண்ட module-கள் அதைத் தோற்கடிக்கலாம்.
இவை "குறைவான JS-ஐ அனுப்பு" என்பதற்குப் பின்னால் உள்ள இரண்டு lever-கள். code splitting எது எப்போது load ஆகிறது என்பதைத் தீர்மானிக்கிறது, tree shaking அதில் என்ன இருக்கிறது என்பதைத் தீர்மானிக்கிறது, மேலும் tree shaking static ESM-ஐச் சார்ந்துள்ளது என்பதை நீங்கள் அறிய interviewer-கள் விரும்புகிறார்கள் — ஒரு bundle-ஐ உண்மையில் tune செய்தவர்களை அதைப் பற்றி மட்டும் படித்தவர்களிடமிருந்து பிரிக்கும் ஒரு விவரம் இது.
விரிவான பதில்களுடன் கூடிய IT நேர்காணல் கேள்விகளின் நூலகம் — Junior முதல் Senior வரை.
நன்கொடை