You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Webpack production config can be optimized to trim down image size and build time #88
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');constfs=require('fs');constpath=require('path');// Here we just check if the MFE has it's own production, so we don't overwrite just like we do for devconstbaseProdConfig=(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. {%ifnotMFE_REMOVE_WEBPACK_BUILD_CACHE%}// This shall boost rebuild time for subsequent builds.// Ref docs: https://webpack.js.org/configuration/cache/#cachecachedirectorybaseProdConfig.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 buildbaseProdConfig.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;
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
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
Activity
[-]Add useful defaults for webpack production config[/-][+]Webpack production config can be customized to trim down image size and build time[/+][-]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[/+]johnvente commentedon Jun 20, 2023
Hi @ghassanmas ! I would like to contribute with this 👀
ziafazal commentedon Jan 2, 2024
Hi @ghassanmas what is the status of this issue?
muhammadadeeltajamul commentedon Jun 3, 2026
PR