Minomax Configuration
The Minomax configuration file is a simple JavaScript file (minomax.config.js
) that acts as the control center for customizing and fine-tuning optimizations. It allows you to define how images, videos, and web documents are processed, stored, and optimized.
Key Highlights of the Configuration File:
- File Style: A JavaScript file that exports a configuration object.
-
Initialization: Easily initialize the configuration file using the CLI command:
npx minomax init
This generates a ready-to-use configuration file with default settings.
-
Customization Scope:
- Storage Paths: Specify where processed files are saved.
- Compression Formats: Define output formats for images (e.g., WebP, AVIF) and videos (e.g., MP4, WebM).
- Optimization Parameters:
- Images: Set quality, encoding type, and advanced image processing options.
- Videos: Configure codec type, compression level, and more.
- Web Documents: Customize HTML, CSS, and JavaScript minification parameters.
- Adaptability: Modify high-level settings like screen sizes for responsive images, ignored files or folders, and experimental features.
The configuration file ensures that every aspect of Minomax’s functionality aligns perfectly with your project’s requirements.
In the next section, we’ll explore the structure and individual options available within the configuration file.
Skeleton of Configuration File
The configuration file is structured to offer flexibility while keeping everything organized and intuitive. Below is the basic skeleton, followed by a detailed explanation of each key:
const defaultConfig: ConfigurationOptions = {
imageWorker: { ... },
videoWorker: { ... },
webDoc: { ... },
lookUpPatterns: { ... },
ignorePatterns: ["node_modules/**"],
destPath: "./minomax-output",
removeOld: true,
experimental: { selectorRenamer: false },
};
export default defaultConfig;
Key Components of the Configuration File
1. imageWorker
Manages settings related to image optimization, including output formats and encoding options.
encoding
: Defines the output format (e.g., WebP, AVIF) and compression options for images.set
: Allows customization of responsive image generation, including screen sizes and upscale levels.
2. videoWorker
Handles video compression settings.
encoding
: Specifies codec types (e.g., H.265, AV1) and compression levels for optimal video quality and size.
3. webDoc
Covers optimization for web documents such as HTML, CSS, and JavaScript.
htmloptions
: Controls minification of HTML documents, including options to remove comments, redundant attributes, and whitespace, along with inline CSS/JS minification.
4. lookUpPatterns
Defines the file path patterns Minomax should lookup for inputs.
webDoc
: Patterns for web documents, e.g.,["**/*.css", "**/*.js", "**/*.html"]
.image
: Patterns for image files, e.g.,["**/*.png", "**/*.jpg", "**/*.webp"]
.video
: Patterns for video files, e.g.,["**/*.mp4", "**/*.webm"]
.
5. ignorePatterns
A list of file paths or patterns to exclude from processing.
- Example:
"node_modules/**"
ensures third-party dependencies are not processed.
6. destPath
Specifies the output directory where optimized files are stored.
- Default:
"./minomax-output"
.
7. removeOld
Determines whether the output directory should be cleared before processing begins.
- Default:
true
.
8. experimental
A section for enabling experimental features.
selectorRenamer
: A feature that renames CSS selectors to minimize file size (currently experimental).
By understanding and customizing these keys, you can tailor Minomax’s functionality to your project’s unique needs. In the following sections, we’ll explore individual components like imageWorker
and webDoc
in greater detail, complete with examples for advanced customization.
Thank you for choosing Minomax to optimize and elevate your web projects!
Keywords:
- Minomax configuration
- Web optimization settings
- Image set generation
- Screen sizes
- Upscale levels
- Encoding options
- Image compression
- Web document compression
- Minification