![]() ![]() Besides JavaScript, it's possible to minify other assets, such as CSS and HTML too.Webpack performs minification in production mode using Terser by default.Specific unsafe transformations allow you to reach even smaller results while potentially breaking code that relies, for example, on exact parameter naming. Minification process analyzes your source code and turns it into a smaller form with the same meaning if you use safe transformations.Minification is the most comfortable step you can take to make your build smaller. Although protecting code is difficult when it's shared with the client, the code can be made much harder to use. To make it more tricky for third parties to use your code, use webpack-obfuscator. Using webpack, it's possible to perform preprocessing with compression-webpack-plugin. Often the compression setup can be done on server-side. The downside of using additional compression is that it will lead to extra computation on the client side but on the plus side you save bandwidth. Compressing bundles #Ĭompression techniques, such as gzip or brotli, can be used to reduce the file size further. Using last-call-webpack-plugin is a more generic approach and you can use it to define which processing to use against which file format before webpack finishes processing. Webpack 5.5.0 compiled successfully in 6388 ms If you build the project now ( npm run build), you should notice that CSS has become smaller as it's missing comments and has been concatenated: ⬡ webpack: Build FinishedĪsset vendor.js 126 KiB (name: vendor ) (id hint: commons ) 2 related assetsĪsset main.js 3.32 KiB (name: main ) 2 related assetsĪsset 34.js 247 bytes 2 related assetsĪsset main.css 730 bytes (name: main ). const TerserPlugin = require ( "terser-webpack-plugin" ) To attach it to the configuration, define a part for it first: To get started, include the plugin to the project: npm add terser-webpack-plugin -D To tune the defaults, we'll attach terser-webpack-plugin to the project so that it's possible to adjust it. In webpack, minification process is controlled through two configuration fields: optimization.minimize flag to toggle it and optimization.minimizer array to configure the process. Modifying JavaScript minification process # Rewriting the parameters breaks code unless you take precautions against it in this case. For example, Angular 1 expects specific function parameter naming when using modules. Unsafe transformations can break code as they can lose something implicit the underlying code relies upon. Good examples of this include renaming variables or even removing entire blocks of code based on the fact that they are unreachable ( if (false)). Safe transformations do this without losing any meaning by rewriting code. The point of minification is to convert the code into a smaller form. Compared to UglifyJS, the earlier standard for many projects, it's a future-oriented option.Īlthough webpack minifies the output by default, it's good to understand how to customize the behavior should you want to adjust it further or replace the minifier. Terser is an ES2015+ compatible JavaScript-minifier. Since webpack 4, the production output gets minified using terser by default. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |