![]() 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. Check out the Minify and compress network payloads guide to learn more about tools to minify JS, and some complementary techniques, like compression.Since webpack 4, the production output gets minified using terser by default. Minification can also be applied to other types of files. In this guide, we've covered CSS Minification with webpack, but the same approach can be followed with other build tools, like gulp-clean-css for Gulp, or grunt-contrib-cssmin for Grunt. Since CSS files are render-blocking resources, if you apply minification on sites that use large CSS files, you can see improvements on metrics like First Contentful Paint. The report doesn't show "Minify CSS" as "Opportunity" anymore, and has now moved to "Passed Audits" section: Click on Performance and find the Opportunities section.Both files are much smaller, in particular, the animate.css has been reduced in ~26%, saving ~20KB! You can inspect these files, and see that the new versions don't contain any whitespaces. Select the Disable cache checkbox if it isn't already.Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.To inspect the size and content of the files: If you got lost in any previous step, you can click here, to open an optimized version of the site. Next, you'll check the result of this optimization with performance tools. This is how the resulting will look like: Take a look at the following CSS block: body ) ,Īfter making the changes a rebuild of the project will be triggered. In production, these characters can be safely removed, to reduce file size without affecting how the browser processes the styles. CSS files can contain unnecessary characters, such as comments, whitespaces, and indentation.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |