Sometimes in my free time, have you ever tried F12 to see how well-known website they are designing html tags, or play around with file js on their products to see how they code?

For example, when F12 came to see google element tags. Does anyone wonder as to why the class name tags are not defined by any rules =))

Or when looking at the js file of websites you often see the function definition is very miscellaneous

Of course, there must be a reason, but looking at the class name and debugging the code name there …

Reason

For modern applications, in addition to the application, it must pay attention to many factors such as speed, security, avoiding copying ideas …

Minify js , css or obfuscate with class names will have the following advantages.

• Reduce the size of those js files, help clients load those files faster
• Hide the source code , avoid stealing ideas
• Avoid using extension interfere with the UI
• ….

Minify

How it works

Minify is a technique that uses certain npm tools like uglify-js , minifier , babel-minify to minimize your code.

The minimalist way, there are many methods such as shortening variable names, function names also a, b, C … remove trailing lines , spaces , index …

Or simply convert the following logic

As we can see, the word true takes up to 4 characters , while !0 only takes 2 characters .

Sometimes I also wonder if there is a time when minify how the function has the same name ???

In fact, sometimes you seem to have functions that have the same name but are placed in different scope so they are not affected.

You can test minify through some online sites, such as Uglify JS . We test the following simple code.

After being minified, 68% size is saved

When to minify

In fact, we only minify on production , I’ve seen some of you run npm run production on local (faceplam) …

Because simply improving the local file size does not solve the problem of the application, sometimes it is a double-edged sword, when minify it will be more difficult to debug the code.

To demonstrate that minify helps reduce file size, we can test the following, for example, here I use Laravel + webpack .

When run npm run dev (No minify )

When run npm run production (Apply minify )

Do you see the difference yet, remember to use minify

Obfuscate CSS class names

Before going into operation we have the following simple formula

Obfuscated CSS class names == Reduce file size == Reduce time to spread over the network.

Have you ever designed a button with the class name as follows

<button class = “button button-color-red button – active”> title </button>

Obfuscate can help make your class names simpler. Minimize characters as well as avoid the interference of extension .

The CSS module solves the encapsulation problem in css, helping to redefine class names including class-name , scopce , and random hash functions . Class names can be defined using the localIdentName attribute. For example [name]___[local]___[hash:base64:5]

Let’s take a real-world example when using CSS modules with React and Webpack .

Button.css

Button.js

webpack.config.js / loaders section

• The module attribute tells webpack that we need to obfuscated class names . You should also set the attribute to false during development for easy debug .
• The localIdentName attribute specifies the format of the class name after being obfuscation . As the above example we will specify the class name consists of 4 characters , endcode with sha1 .

Tadaaaaaaaaaaaa, this is the result.

summary

So I’ve just introduced two simple ways to minify and obfuscate the file css , js and html . For big companies like Google and Facebook they always apply these methods to improve their products. Or simply like Chatwork has just applied the obfuscate css technique, which makes it difficult for extension like Chat++ to interfere with the UI.

Thank you for watching the article, if useful article remember me an upvote and follow me to produce more quality posts.

Reference: How to obfuscate CSS class names with React and Webpack