Merge pull request #266 from ghassanmas/reduce-css-file-size

feat: reduce size CSS output file

README.rst

@@ -174,6 +174,16 @@ or to test with an existing project you can do the following:
 3. Install the development version of frontend-build
    ``npm i --save-dev @edx/frontend-build@file:./frontend-build``.
 
+Optimization
+-----------
+To increase optimization by reducing unused CSS, you can set ``USE_PURGECSS=true`` in ``.env`` or as ENV var in the corresponding MFE.
+However, note that doing this will increase build time by 30%. It's thus not recommended to use this option during development.
+On the other hand, enabling PurgeCSS will increase browser performance for the end user by as much as 20% (as measured by `lighthouse`_).  Operators are encouraged to do so for production deployments.
+
+For more information about optimizing MFEs, refer to the `issue #138`_ in the wg-frontend repository.
+
+.. _lighthouse: https://developer.chrome.com/docs/lighthouse/overview/
+.. _issue #138: https://github.com/openedx/wg-frontend/issues/138
 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-build.svg?branch=master
    :target: https://travis-ci.com/edx/frontend-build
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-build

config/webpack.prod.config.js

@@ -17,6 +17,9 @@ const PostCssAutoprefixerPlugin = require('autoprefixer');
 const PostCssRTLCSS = require('postcss-rtlcss');
 const PostCssCustomMediaCSS = require('postcss-custom-media');
 
+// Reduce CSS file size by ~70%
+const purgecss = require('@fullhuman/postcss-purgecss');
+
 const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic-plugin');
 const commonConfig = require('./webpack.common.config');
 const presets = require('../lib/presets');
@@ -26,6 +29,12 @@ dotenv.config({
   path: path.resolve(process.cwd(), '.env'),
 });
 
+const extraPostCssPlugins = [];
+if (process.env.USE_PURGECSS) { // If USE_PURGECSS is set we append it.
+  extraPostCssPlugins.push(purgecss({
+    content: ['./**/*.html', './**/*.js', './**/*.jsx', './**/*.ts', './**/*.tsx'],
+  }));
+}
 const extraPlugins = [];
 if (process.env.ENABLE_NEW_RELIC !== 'false') {
   // Enable NewRelic logging only if the account ID is properly defined
@@ -108,6 +117,7 @@ module.exports = merge(commonConfig, {
                   PostCssRTLCSS(),
                   CssNano(),
                   PostCssCustomMediaCSS(),
+                  ...extraPostCssPlugins,
                 ],
               },
             },