Skip to content

Webpack production config can be optimized to trim down image size and build time #88

Open

Description

@ghassanmas

The webpack production default configuration which comes with frontend-build includes settings that we might not need for production, which when disabled shall reduce the bundle size and slightly decrease the build time.

Add to that we can also enable webpack cache for making subsequent builds faster, though it would be tricky because we would essentialy depend on docker build cache of webpack cache, so cache in cache.

Changes which I envision:

const { merge } = require('webpack-merge');
const fs = require('fs');
const path = require('path');

// Here we just check if the MFE has it's own production, so we don't overwrite just like we do for dev
const baseProdConfig = (
  fs.existsSync('./webpack.prod.config.js')
    ? require('./webpack.prod.config.js')
    : require('@edx/frontend-build/config/webpack.prod.config.js')
);


// Creating a flag to opt out from cache, though this cache would be saved not on the acutal image but on docker build cache 
// So I am not sure about the usefulness (In affecting the final image size) of it, probably we can create a flag of all those settings. 
{% if not MFE_REMOVE_WEBPACK_BUILD_CACHE  %}
// This shall boost rebuild time for subsequent builds.
// Ref docs: https://webpack.js.org/configuration/cache/#cachecachedirectory
baseProdConfig.cache= {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname,'.cache'), 
},
{% endif %}

// Disable Unnecessary Plgugins
// Those (NewRelicPlugin, and HtmlWebpackNewRelicPlugin)  plugins are not needed specially that Relic is not supported with tutor 
// For BundleAnalyzerPlugin this definilty not required for production unless opreator would want to investage the productoin build
baseProdConfig.plugins = baseProdConfig.plugins
.filter(plugin => (plugin.constructor.name !== 'NewRelicPlugin'))
.filter(plugin => (plugin.constructor.name !== 'HtmlWebpackNewRelicPlugin'))
.filter(plugin => (plugin.constructor.name !== 'BundleAnalyzerPlugin'));

// Don't generate/incldue .map files _Reduces dist to ~-70%_
// The .map files can be utilized in development mode Or with relic, those files are needed to know if an error to be thrown what was the file it was fired from. 
// Again it will be useful for development mode or/and with Relic. In deveopment mode browser dev tool might request those files in order to make error messages more readable/useful. 
baseProdConfig.devtool = false;

module.exports = baseProdConfig;

Activity

  1. changed the title [-]Add useful defaults for webpack production config[/-] [+]Webpack production config can be customized to trim down image size and build time[/+] on Nov 28, 2022
  2. changed the title [-]Webpack production config can be customized to trim down image size and build time[/-] [+]Webpack production config can be optimized to trim down image size and build time[/+] on Nov 28, 2022
  3. added this to the Palm.1 milestone on Dec 7, 2022
  4. johnvente commented on Jun 20, 2023

    @johnvente

    Hi @ghassanmas ! I would like to contribute with this 👀

  5. ziafazal commented on Jan 2, 2024

    @ziafazal

    Hi @ghassanmas what is the status of this issue?

  6. moved this from Backlog to In Progress in Tutor project managementon Jun 2, 2026
  7. muhammadadeeltajamul commented on Jun 3, 2026

    @muhammadadeeltajamul
    Collaborator
  8. moved this from In Progress to In review in Tutor project managementon Jun 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions