![]() Here you need to select a Name Format for your file renaming.You can choose from Name and Index, Name and Counter, and Name and Date.In the Custom Format box, enter the new name that will be included in all of the selected files.You can support my open-source work and me writing technical articles through Buy Me A Coffee and Patreon. or just want to express your support/ curiosity and say “Hi!”, email me at or DM via Twitter. If you can give feedback, an SEO advice, a business advice, know an angel investor, know someone who can write an article about GO2CINEMA, make a tweet, invite me to a conference, a radio talk show, etc. However, it is my first startup this decade and there are a lot of things I need help with. Meanwhile, you can see a demo of this minification being used on the GO2CINEMA movie and venue pages, e.g. It has other benefits, such as deterring scapers that rely on the CSS class names to navigate or accidentally matching CSS selectors of the ad-blocker blacklists. On the other hand, setting up this minification is a one-time investment and it reduces the size of the document that needs to be parsed. GO2CINEMA CSS bundle compressed using the Brotli algorithm saves a mere 1 KB compared to the original bundle with the long class names. The first argument against such minification is that the compression algorithms will do it for you. This has reduced GO2CINEMA CSS bundle size from 53 KB to 47 KB. To leverage this, use csso-webpack-plugin to post-process the CSS bundle: This information allows the optimizer to move rules more aggressive. selectors from different scopes don’t match the same element. Scopes define lists of class names that are exclusively used on some markup, i.e. There is a good reason I have added _ into the CSS class name separating the component name and the local identifier name – the distinction is useful for minification.Ĭsso (CSS minifier) has scopes configuration. Using Scope isolation to further reduce the bundle size This has reduced GO2CINEMA CSS bundle size from 140 KB to 53KB. MovieView_movie-description-with-summary-paragraph_yvKVV our class names have become. ![]() This guarantees short and unique class names. To generate the shortest class names, I have created class name index and used the incstr module to generate incremental IDs for every entry in the index. However, instead of a random hash, I wanted the shortest possible class names. Thanks to babel-plugin-react-css-modules and css-loader sharing the same logic to generate the CSS class names, we can change the class names to whatever we like, even a random hash. The cool thing about generateScopedName is that the same instance of the function can be used for Babel and webpack build process: Making the names short However, if you are using webpack and babel-plugin-react-css-modules, you are in luck ? – you can rename class names at the compilation time using c ss-loader g etLocalIdent configuration and the equivalent babel-plugin-react-css-modules g enerateScopedName configuration. Renaming CSS class names at the compilation time ![]() MovieView_movie-description-with-summary-paragraph_yvKVV. MovieView_movie-title_yvKVV if you like descriptive names, it can get a lot longer, e.g. Therefore, a generated class name will look something like this. The class name template is described using css-loader localIdentName configuration, e.g. ![]() If you are using CSS modules, your CSS modules are likely going to include stylesheet file name, local identifier name and a random hash. This is because a CSS minifier does not control the HTML output. There is one thing a minifier cannot do – change the selector names. HTMLīut how? Shortcomings of the CSS minifiers Have you ever peeked into the source code of The first thing you will notice is that the CSS class names are no more than a couple of characters long. However, I did not like inlining 70 KB into every HTML document, esp. ūsus renders HTML of single page applications (SPA) and inlines the CSS used to render the page. I have solved pre-rendering of the HTML using ūsus. Somewhere along the way, I’ve gotten obsessed with the critical rendering path optimization ⚡️. I have done a splendid job making it fast, simple and secure. By Gajus Kuizinas Reducing CSS bundle size 70% by cutting the class names and using scope isolation Just like Google does itĪt the beginning of this year I have quit consulting and set out to build GO2CINEMA - Fast, simple and secure way to book cinema tickets in the UK. ![]()
0 Comments
Leave a Reply. |