Front End Development Technology & Digital Applications 3 — Questions and Answers
Question 1: What is the role of a bundler like Webpack or Vite in modern front-end development?
- Combining multiple source files into optimized bundles for production (Correct answer)
- Running unit tests across all JavaScript files
- Formatting code according to a style guide
- Managing npm package versions
Correct answer: Combining multiple source files into optimized bundles for production
Bundlers traverse the dependency graph of source files and output optimized, minified bundles suitable for production delivery.
Question 2: Which browser developer tool panel is most useful for diagnosing slow network requests and waterfall loading issues?
- Network panel (Correct answer)
- Console panel
- Elements panel
- Sources panel
Correct answer: Network panel
The Network panel shows a waterfall chart of all requests, their timing, size, and status codes for diagnosing load performance.
Question 3: What is 'tree shaking' in the context of JavaScript bundling?
- Removing unused code from the final bundle (Correct answer)
- Sorting module imports alphabetically
- Minifying variable names to single characters
- Splitting code into lazy-loaded chunks
Correct answer: Removing unused code from the final bundle
Tree shaking statically analyzes ES module imports and eliminates dead code that is never imported or called, reducing bundle size.
Question 4: What is the function of a transpiler like Babel in a front-end build pipeline?
- Converting modern JavaScript syntax to a version compatible with older browsers (Correct answer)
- Translating TypeScript types to JavaScript at runtime
- Compiling CSS preprocessors like Sass to standard CSS
- Optimizing images during the build process
Correct answer: Converting modern JavaScript syntax to a version compatible with older browsers
Babel transforms modern JavaScript (ES2015+) syntax and features into ES5-compatible code so older browsers can execute it.
Question 5: Which API enables real-time, bidirectional communication between a browser and a server over a single persistent connection?
- WebSockets (Correct answer)
- Fetch API
- Server-Sent Events
- Long Polling
Correct answer: WebSockets
WebSockets establish a persistent full-duplex channel, allowing both client and server to send messages at any time without re-establishing connections.
Question 6: What does 'lazy loading' accomplish when applied to images or JavaScript modules?
- Defers loading resources until they are actually needed, improving initial page load (Correct answer)
- Preloads all resources before the page renders
- Caches resources permanently in the browser
- Compresses resources to reduce their file size
Correct answer: Defers loading resources until they are actually needed, improving initial page load
Lazy loading delays fetching non-critical resources until they enter the viewport or are required, reducing initial page load time.
Question 7: What is the purpose of an .env file in a front-end project?
- Storing environment-specific configuration variables like API endpoints and feature flags (Correct answer)
- Defining browser compatibility targets for transpilation
- Listing npm packages and their versions
- Configuring the web server's routing rules
Correct answer: Storing environment-specific configuration variables like API endpoints and feature flags
An .env file holds environment variables that configure application behavior per environment (development, staging, production) without hardcoding values.
Front End Development Technology & Digital Applications 3
What is the role of a bundler like Webpack or Vite in modern front-end development?