Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
23 changes: 23 additions & 0 deletions docusaurus/docs/minify-keep-class-names.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
id: minify-keep-class-names
title: Minify Keep Class names
---

The production build of Create React App uses the [terser-js](https://github.com/terser-js/terser) Webpack Plugin to minify the JS / TS sources. By default the class anmes are minified and replaced. If you want to keep the JavaScript Class Names you can set the env variable `KEEP_CLASS_NAMES` before you run the production build.

Example with [cross-env](https://github.com/kentcdodds/cross-env#readme):

```sh
cross-env KEEP_CLASS_NAMES='true' && react-scripts build
```

In the `package.json` this would look like:

```json
{
...
"scripts": {
"build": "cross-env KEEP_CLASS_NAMES='true' react-scripts build"
}
}
```
3 changes: 2 additions & 1 deletion docusaurus/website/sidebars.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@
"adding-a-router",
"adding-custom-environment-variables",
"making-a-progressive-web-app",
"production-build"
"production-build",
"minify-keep-class-names"
],
"Testing": ["running-tests", "debugging-tests"],
"Back-End Integration": [
Expand Down
4 changes: 4 additions & 0 deletions packages/react-scripts/config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';

// For keeping classNames while minifying the sources for production build
const terserKeepClassNames = process.env.KEEP_CLASS_NAMES === 'true';

const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
);
Expand Down Expand Up @@ -195,6 +198,7 @@ module.exports = function(webpackEnv) {
// This is only used in production mode
new TerserPlugin({
terserOptions: {
keep_fnames: terserKeepClassNames,
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
Expand Down