short-class-names
v1.3.1
Published
Obfuscate and short class names for react apps.
Downloads
5
Maintainers
lucas5zvazquezReadme
short-class-names
Short class names of react apps.
Usage
- Install it and dependences:
npm i -D short-class-names path
- Create config file:
Create short-class-names.config.js in the npm root directory. Inside it add the follow items, you can edit it how you want:
exports.config = () => {
return {
input_path: './dist',
output_path: './dist/short',
html_files: [
'contact.html',
'index.html'
],
app_files: [
'main.js',
'contact.js'
]
}
}- Create script to run it:
In package.json add the follow text to the "script" list:
"short": "node node_packages/short-class-names/short.js"
- Ready for use.
Just execute it with:
npm run short
The new html, js and css files will put in ./dist/short
IMPORTANT:
- This script load css files following local stylesheet declarations from the html files. (You dont need to declare the css files)
- This script only edit the class names that exist in local html or app files and in the css files at same time.
- The class names on react need to be like
class:"*", doesnt work with other style declaration. - Allow multi page, not only SPA.
Recomendation
Use in production after running webpack. I recommend the follow modules to use with webpack:
For javascript:
DEV: terser-webpack-plugin
For html:
DEV: html-loader html-webpack-plugin
For css:
DEV: css-loader mini-css-extract-plugin node-sass optimize-css-assets-webpack-plugin postcss-loader postcss-preset-env purgecss-webpack-plugin sass-loader style-loaderUsing all of this, the result is a react app with the html, javascript and css files super minimized. Perfect for add a last optimization action with short-class-names.
EXAMPLE OF USE
Start structure
...
short-class-names.config.js
/dist
index.html
react.js
local-css-1.css
local-css-2.css
local-css-3.cssConfig file:
short-class-names.config.js
exports.config = () => {
return {
input_path: './dist',
output_path: './dist/short',
html_files: [
'index.html'
],
app_files: [
'react.js'
]
}
}Input files:
react.js
....
return (
<form class="react-class" onClick={this.toggleButton}>
{toggle ? "ON" : "OFF"}
</form>
);
....index.html
<html>
<head>
<link rel="stylesheet" href="https://www.external-class-for-containers.com/container.css">
<link rel="stylesheet" href="local-css-1.css">
<link rel="stylesheet" href="local-css-1.css">
</head>
<body class="main">
<div class="pad">
<a class="main"></a>
<a class="other"></a>
</div>
<container class="container"></container>
</body>
</html>local-css-1.css
.main {
color: red
}
.main > .pad {
color: blue
}
.unused {
color: black
}local-css-1.css
body {
background-color: red
}
.other {
color: yellow
}
.react-class {
color: blue
}Output
react.js
....
return (
<form class="MTE" onClick={this.toggleButton}>
{toggle ? "ON" : "OFF"}
</form>
);
....index.html
<html>
<head>
<link rel="stylesheet" href="https://www.external-class-for-containers.com/container.css">
<link rel="stylesheet" href="local-css-1.css">
<link rel="stylesheet" href="local-css-1.css">
</head>
<body class="MDA">
<div class="MDE">
<a class="MDA"></a>
<a class="MTA"></a>
</div>
<container class="container"></container>
</body>
</html>local-css-1.css
.MDA {
color: red
}
.MDA > .MDE {
color: blue
}
.unused {
color: black
}local-css-1.css
body {
background-color: red
}
.MTA {
color: yellow
}
.MTE {
color: blue
}End structure
...
short-class-names.config.js
/dist
index.html
react.js
local-css-1.css
local-css-2.css
local-css-3.css
/short
index.html
react.js
local-css-1.css
local-css-2.cssObservations of example
- Class names that exist in css files but not in html or app files dont change his names.
- Class names that exist in html or app files dont change his names.
- The class used for dom elements, like body (!= .body) dont change his names.
- The files that doesnt appear in stylesheet declarations of the html files dont be imported to the output folder.