Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: reduce size CSS output file #266

Merged
merged 1 commit into from
Apr 4, 2023
Merged

feat: reduce size CSS output file #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions README.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 10 additions & 0 deletions config/webpack.prod.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
arbrandes marked this conversation as resolved.
Show resolved Hide resolved

const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic-plugin');
const commonConfig = require('./webpack.common.config');
const presets = require('../lib/presets');
Expand All @@ -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
Expand Down Expand Up @@ -108,6 +117,7 @@ module.exports = merge(commonConfig, {
PostCssRTLCSS(),
CssNano(),
PostCssCustomMediaCSS(),
...extraPostCssPlugins,
],
},
},
Expand Down
Loading