Asset Handling in Parcel: Images, Fonts, and Styles Quiz Quiz

Deepen your understanding of asset handling in Parcel bundling with this focused quiz. Explore practical concepts related to working with images, fonts, and styles, including import methods, asset resolving, and optimization for effective web development.

1. Importing Images in Parcel

   When adding an image to your HTML through JavaScript in a Parcel project, which import statement correctly resolves and bundles the image asset?

   1. import './images/photo.png';
   2. import myImage from './images/photo.png';
   3. require('./images:photo.png')
   4. loadImage('./images/photo.png')

   Explanation: Using import myImage from './images/photo.png'; tells Parcel to process and bundle the image, allowing you to reference the resolved URL in your JavaScript. The require syntax is not valid in standard JavaScript modules, and the colon in './images:photo.png' is a typo. Importing './images/photo.png'; directly without assigning does not provide access to the asset's path. The loadImage syntax is not recognized by Parcel for asset importing.

2. CSS and Font Files

   Which method ensures that a custom font is properly bundled and accessible when using Parcel with a CSS file?

   1. @use './fonts/Roboto.woff2';
   2. font-family: src('./fonts/Roboto.woff2');
   3. @font-face { src: url('./fonts/Roboto.woff2'); }
   4. @import fonts: 'Roboto.woff2';

   Explanation: The @font-face rule with src: url('./fonts/Roboto.woff2'); is the correct way to link a font file so Parcel can discover and bundle it. The @import syntax with 'fonts:' is incorrect. font-family: src('./fonts/Roboto.woff2'); is not a valid CSS way to declare a font. @use is not for importing font files in CSS.

3. Inlining Assets with Parcel

   If you want Parcel to inline a small image as a data URL in your bundled CSS, which option do you need to configure or use?

   1. Set the asset's size below Parcel's inline limit and reference it normally in CSS
   2. Rename the file extension to .dataurl
   3. Use the attribute src-inline in the HTML image tag
   4. Include the image directly as base64 text in your CSS file

   Explanation: Parcel inlines assets like images as data URLs if their file size is under a certain threshold, so referencing the image normally in your CSS is sufficient when the file is small. Using src-inline is not standard in HTML for inlining images. Renaming the file extension does not automatically result in inlining. Encoding and pasting base64 directly is manual and bypasses Parcel's automation.

4. Resolving Asset Paths in Stylesheets

   What is the correct way to reference an image file from within a CSS stylesheet in a Parcel project to ensure the path resolves after bundling?

   1. background-image: url('./assets/bg.jpg');
   2. background-image: ref('./assets/bg.jpg');
   3. background-image: path('./assets/bg.jpg');
   4. background: image-url('assets/bg.jpg');

   Explanation: Using url('./assets/bg.jpg') in a CSS file is the proper syntax, allowing Parcel to process and bundle the asset, updating the reference as needed. path() is not a recognized CSS function. image-url() and ref() are also incorrect as they are not valid CSS syntax for images. Only url() integrates with Parcel's asset resolver.

5. Optimizing Assets Automatically

   How does Parcel help optimize image and font assets for production builds?

   1. Parcel optimizes them by minifying and generating hashed file names automatically.
   2. Parcel disables any changes to assets during production builds.
   3. Developers must use external plugins for only image optimization.
   4. Assets must be manually optimized and renamed before building.

   Explanation: Parcel processes assets by optimizing them, such as minifying files and adding hashed names for cache busting in production builds. Manual optimization and renaming are not necessary with Parcel's built-in capabilities. The statement about disabling changes is incorrect, as Parcel actively processes assets. While external plugins can be used, Parcel already provides built-in optimization, so plugins are optional rather than required.