Quiz for Code Splitting

Q1: What is code splitting in React?

A. A. Dividing code into smaller chunks loaded on demand B. B. Combining all code into a single file C. C. Writing code without components D. D. Writing code without functions

Q2: Which tool or feature does React use for code splitting?

A. A. React.lazy and Suspense B. B. Redux C. C. React Router D. D. Context API

Q3: What is the benefit of code splitting?

A. A. Improves performance by reducing initial load time B. B. Makes code harder to debug C. C. Increases bundle size D. D. Makes app slower

Q4: How does code splitting affect user experience?

A. A. Faster initial rendering B. B. Slower response time C. C. Increased load times D. D. No effect

Q5: Which JavaScript syntax is used for dynamic imports in code splitting?

A. A. import() B. B. require() C. C. fetch() D. D. load()

Q6: Which React feature should wrap components loaded with React.lazy?

A. A. Suspense B. B. Fragment C. C. StrictMode D. D. Provider

Q7: Code splitting is primarily aimed at improving:

A. A. Application load time B. B. Data storage C. C. Security D. D. Accessibility

Q8: Which of the following is NOT a common method for code splitting?

A. A. Route-based splitting B. B. Component-level splitting C. C. Combining all files D. D. Vendor splitting

Q9: How can you achieve route-based code splitting?

A. A. Lazy load route components with React.lazy B. B. Import all routes at once C. C. Use Redux D. D. Use Context API

Q10: What is a potential downside of code splitting?

A. A. Increased number of network requests B. B. Larger initial bundle C. C. Decreased maintainability D. D. Increased security risk

Q11: Which build tool helps manage code splitting in React apps?

A. A. Webpack B. B. Babel C. C. ESLint D. D. Jest

Q12: What is the role of chunk files in code splitting?

A. A. They are separate bundles loaded on demand B. B. They combine all code into one C. C. They hold CSS only D. D. They are for images

Q13: Can code splitting be applied to third-party libraries?

A. A. Yes, via vendor chunk splitting B. B. No, only app code C. C. Only CSS files D. D. Only images

Q14: What is “vendor splitting”?

A. A. Splitting third-party libraries into separate bundles B. B. Splitting user code only C. C. Splitting CSS files D. D. Splitting images

Q15: Which method is recommended to dynamically import a module?

A. A. import('./MyComponent') B. B. require('./MyComponent') C. C. fetch('./MyComponent') D. D. load('./MyComponent')

Q16: Does code splitting reduce the total amount of code loaded?

A. A. No, it just delays loading some code B. B. Yes, it removes code C. C. Yes, it compresses code D. D. No, it increases code size

Q17: How do you monitor which chunks are loaded?

A. A. Using browser developer tools network tab B. B. Using console logs C. C. Using CSS inspector D. D. Using React DevTools only

Q18: Can code splitting be combined with server-side rendering (SSR)?

A. A. Yes, but requires special setup B. B. No, they are incompatible C. C. Only with static rendering D. D. No, only client-side

Q19: What is the primary goal of code splitting?

A. A. To improve application performance and user experience B. B. To reduce application features C. C. To simplify code D. D. To increase bundle size