Vite for Production: Build Optimization and Deployment Quiz Quiz

Assess your skills in optimizing build outputs and deploying projects using Vite. This quiz covers essential topics including asset optimization, configuration, and deployment best practices for efficient web applications.

1. Output Directory Configuration

   Which configuration option should you use to specify a custom directory for build output files when optimizing a project for production?

   1. build.outDir
   2. distFolder
   3. outputDirectory
   4. directoryOutput

   Explanation: The correct option is 'build.outDir', which allows you to specify the directory where production build files will be output. 'outputDirectory', 'distFolder', and 'directoryOutput' are not recognized configuration options in the build process, though their names might seem valid. Choosing incorrect options will result in the default output location being used, potentially causing confusion or misplacement of output files.

2. Static Asset Optimization

   During a production build, which feature minimizes and hashes static assets like CSS and JavaScript for caching purposes?

   1. Tree walking
   2. Module stashing
   3. Asset hashing
   4. Chunk assembling

   Explanation: Asset hashing adds unique hashes to asset filenames, ensuring that browsers can cache them efficiently and detect file changes. 'Chunk assembling' refers to dividing code for optimization but not to caching or minimizing filenames. 'Tree walking' is a technique used in code analysis but is unrelated to asset file naming or caching. 'Module stashing' is not a concept related to asset optimization.

3. Environment Variables in Production

   When deploying a production build, which variable prefix should you use to safely expose environment values to your client-side code?

   1. CLIENT_
   2. VITE_
   3. ENV_PUBLIC_
   4. PUBLIC_ENV_

   Explanation: Environment variables starting with 'VITE_' are exposed by default to the client, allowing safe configuration for both optimization and deployment. Prefixes such as 'ENV_PUBLIC_', 'PUBLIC_ENV_', and 'CLIENT_' may seem descriptive, but they will not be exposed unless explicitly handled, which could lead to missing or undefined variables in your production code.

4. Optimizing Dependencies

   What is the main purpose of dependency pre-bundling during the build process for production optimization?

   1. To reduce cold start time by bundling common dependencies
   2. To obfuscate code for security
   3. To inline all CSS directly into JavaScript files
   4. To shrink image sizes for faster loading

   Explanation: Pre-bundling dependencies improves build performance and reduces initial page load time by combining commonly used dependencies. Shrinking image sizes is achieved through other optimization techniques, not pre-bundling. Inlining CSS into JavaScript can affect performance negatively and is not a main pre-bundling goal. Code obfuscation is unrelated to dependency optimization.

5. Setting the Base Path

   If your web application will be served from a subdirectory, which configuration property should you modify to ensure asset URLs are generated correctly?

   1. base
   2. publicDirectory
   3. rootUrl
   4. assetPath

   Explanation: Setting the 'base' property adjusts the root path from which assets are served, ensuring correct URL generation when deploying to a subdirectory. 'rootUrl' and 'assetPath' are not recognized build properties and won't affect asset linking. 'publicDirectory' specifies where public assets are sourced but does not control output URLs, making 'base' the only valid answer.