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

[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;

[johnvente]

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

[ziafazal]

Hi @ghassanmas what is the status of this issue?