Skip to main content

Advanced Optimization Settings

This guide delves into the advanced settings available when creating an optimization. These powerful options allow you to fine-tune how MageProxy processes your JavaScript assets to achieve the best possible performance for your specific needs. Since these options require some technical expertise, you might need to reach out to your developer team or development agency for assistance.

Minification​

Minification is a crucial optimization that reduces file size by removing unnecessary characters from your code—such as whitespace, comments, and line breaks—without altering its functionality. For production environments, we strongly recommend keeping minification enabled to ensure the smallest possible bundle sizes and fastest load times.

  • Minify JavaScript bundles: (Default: Enabled) Strips unnecessary characters from JavaScript files.
  • Minify Knockout templates: (Default: Enabled) Strips unnecessary characters from Knockout template files.

Chunking​

If your JavaScript bundles become very large, it can impact loading performance. Chunking solves this by splitting a large bundle into several smaller files, or "chunks." This allows browsers to download them in parallel, which can improve page load times. By default, this feature is disabled but can be beneficial for sites with extensive JavaScript.

  • Chunk JavaScript bundles: (Default: Disabled) When enabled, this option activates the chunking process.
  • Chunk Size (kB): Specify the maximum size for each chunk in kilobytes. If a bundle exceeds this size, it will be split.

Bundling Controls​

Bundling is at the heart of MageProxy's optimization engine. These settings give you precise control over which dependencies are included in your bundles and how they are grouped.

Exclude Dependencies​

In some cases, a specific JavaScript file might cause conflicts or errors when bundled. This option allows you to select any dependency to be excluded from the bundling process. MageProxy will then skip that file, and the browser will load it from your origin server as a fallback, ensuring the rest of your site still benefits from optimized bundles.

Customize Bundle Distribution​

MageProxy ensures each JavaScript file is included in only one bundle to prevent duplication. When a file is used on multiple pages, our algorithm must decide which bundle to place it in.

By default, MageProxy uses a priority system based on the typical customer journey (Homepage -> Category Page -> Product Page -> Cart -> Checkout). It places the shared file in the bundle for the page the user is most likely to visit first. This increases the chance that the browser has already downloaded and cached the bundle, so it doesn't need to be fetched again.

However, not all stores follow the same user flow. We give you the power to adjust this logic. Using a simple drag-and-drop interface, you can change the priority of different pages. This allows you to fine-tune the bundling strategy to perfectly match your site's unique traffic patterns and create the most efficient structure.

Remove Dependencies​

Sometimes, Magento themes or modules include JavaScript libraries that are never actually used on your site. These unused files add unnecessary weight to your pages. This feature lets you select and completely remove specific dependencies from the final bundles, helping you reduce your site's overall JavaScript footprint.

Transpilation​

Transpilation allows you to use modern JavaScript features in your code while ensuring it remains compatible with older browsers. It works by converting your modern code into an older version of JavaScript that more browsers can understand.

  • Target Audience: Define which browsers you need to support using the flexible browserslist syntax. For example, you can target browsers with more than 99.5% market share, or the last 2 versions of all major browsers. You can find all the possible options in the Browserslist documentation.
  • Use Polyfills: (Default: Disabled) While transpilation handles syntax, it doesn't add missing features to older browsers. Polyfills are scripts that replicate modern JavaScript features (like Array.prototype.includes) so your code can run without errors. Enabling this option may increase bundle size but guarantees better compatibility with legacy browsers.
  • Paths: By default, all recorded JavaScript is transpiled. If you only want to transpile specific files or modules, you can define them here using glob patterns. For example, Vendor_Module/js/**/*.js would target all JavaScript files within that module. You can also use a ! prefix to exclude files, like !Vendor_Module/js/**/*.min.js.

Source Map​

Source maps are a developer's best friend. When your code is minified and bundled, it becomes unreadable. If an error occurs, it's nearly impossible to debug. When you enable source maps, they create a mapping between your original, readable code and the optimized code. This allows you to see the original source in your browser's developer tools, making debugging much easier.

  • Include JavaScript Source Map: (Default: Disabled) This option should only be enabled in development environments.