Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michalzalecki/optimize-localidentname
How localIdentName setting for css-loader can influence overall build size
https://github.com/michalzalecki/optimize-localidentname
Last synced: 28 days ago
JSON representation
How localIdentName setting for css-loader can influence overall build size
- Host: GitHub
- URL: https://github.com/michalzalecki/optimize-localidentname
- Owner: MichalZalecki
- Created: 2017-08-12T17:26:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-12T18:07:35.000Z (over 7 years ago)
- Last Synced: 2024-10-25T12:38:11.884Z (3 months ago)
- Language: CSS
- Homepage:
- Size: 77.1 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# optimize-localIdentName
Project created to experiment how `localIdentName` setting for [css-loader](https://github.com/webpack-contrib/css-loader) can influence overall build size.
| | default [hash:base64] | [hash:base64:12] | [name]-[hash:base64:5] | [local]-[hash:base64:5] |
|-----------------|--------------------------|------------------|------------------------|-------------------------|
| css + js | 327 (78 + 249) | 308 (68 + 240) | 300 (64 + 236) | 330 (79 + 251) |
| css + js (gzip) | 107 (28 + 79) | 91 (20 + 71) | 81 (15 + 66) | 92 (23 + 69) |
Those results poof only that `localIdentName` has significant influence on the build size, not that `[name]-[hash:base64:5]` is the best config. Experiment with your project and test the outcome.
* **Interested in optimizing build size?** Read the full story: [Optimize React build for production](https://michalzalecki.com/optimize-react-build-for-production-with-webpack/)
* **Do you like the setup?** Check out: [react-boilerplate-lite](https://github.com/MichalZalecki/react-boilerplate-lite)
## Generate
Play with `generate.js` to manipulate how classes are generated.
```
node generate.js
```
## Installation
```
git clone --depth 1 https://github.com/MichalZalecki/react-boilerplate-lite project
cd project
cp .env-example .env
npm install
```
## Usage
```
npm start # start server
npm run start:dashboard # start server using webpack-dashboard
npm run build # production build (remember to build with NODE_ENV=production)
```