terser
critical
Our great sponsors
terser | critical | |
---|---|---|
27 | 10 | |
8,353 | 9,934 | |
1.2% | - | |
8.9 | 7.1 | |
14 days ago | about 1 month ago | |
JavaScript | JavaScript | |
GNU General Public License v3.0 or later | Apache License 2.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
terser
-
10 Bad Habits That Can Slow Down Your JavaScript Applications π
Example: You've got a main.js file that's as long as a Tolstoy novel. Fix: Use tools like UglifyJS or Terser to minify your code. They'll squeeze out all the unnecessary bits and give you a sleeker, faster-loading file.
-
Things you forgot because of React
They can do it, it is just turned off by default and require more advanced configuration.
https://github.com/terser/terser#cli-mangling-property-names...
-
Understanding Source Maps: Simplifying Debugging
Minifying is a common practice for optimizing production code. (for example, using Terser to minify and mangle JavaScript).
-
How To Secure Your JavaScript Applications
Minification: UglifyJS, Terser
-
Minify private methods in a TypeScript class
Terser is JavaScript compressor that can minified specific method names.
-
Setting up a custom toolchain
A minifier makes your code more compact so that it loads faster. Popular minifiers: Terser, swc.
-
Overview of the next-gen frontend dev tools
There are many minifiers such as terser and uglify. But, because minifying also require to parse the JS, it is actually possible to use esbuild and SWC to minify the code. Here's a benchmark of the main minifiers.
-
Rollup Library Starter
This next one will help us reduce final bundle size by minifying the generated code. It's called rollup-plugin-terser and uses terser under the hood to minify the code.
-
I reduced an npm package size by 50% with minification
fifty-three kilo-byte was a little bit large, and since the bundler i'm using for this package is rollup.js, all ineeded to do was install the terser β a JavaScript compressor toolkit for ES6 mdash; plugin for rollup.
-
How to build tree-shakeable JavaScript libraries
You can see that the div function was copied βas isβ and is not used in any way. When you run Webpack in production mode, it will remove this function. (Internally, Webpack relies on Terser for minification; Rollup performs tree-shaking and dead code elimination on its own.)
critical
-
Frontend developers: stop moving things that Iβm about to click on
CLS is a pain in the arse. Extract your critical CSS and inline it https://github.com/addyosmani/critical although doing critical CSS badly makes things worse.
-
Google Page Speed Insights and Magento 2
There is a tool that allows generating critical CSS and determining which CSS is critical and which is not. It helps to separate it into files, and there is also an npm package for that.
-
Critical CSS? Not So Fast
I am a fan of CSSWizardry and yet I find this post misleading. The examples shown are ways NOT to do frontend performance engineering.
The current best performant way to load JS is asynchronously as documented at https://web.dev/efficiently-load-third-party-javascript/.
And the best way to load CSS is with Critical Path CSS + Async CSS as documented at https://web.dev/defer-non-critical-css/.
The easiest way to generate Critical CSS is https://github.com/addyosmani/critical where you may suggest multiple resolutions.
I have found https://github.com/addyosmani/critical-path-css-tools to be a great resource to master critical path CSS which improves page render speeds. It helps build fast rendering sites, sometimes even sub-second renders given you have a low latency backend.
-
Using Vite with Critical CSS in a way that supports users with JavaScript disabled or unavailable
A while ago I'd noticed that the version (or configuration) of the Critical packaged used by my Netlify build plugin was missing that fallback, so I manually added it to my Eleventy template, no big deal.
-
3 tips that improve landing page speed
Defer or async css/js files β Donβt make leads wait for unnecessary files to download before showing something. In the case of CSS, there are a few tools for in-lining only whatβs above-the-fold into your html.
-
My web performance journey with Nuxt, Storyblok & Netlify
Consider automating the process of extracting and inlining "Above the Fold" CSS using the Critical tool.
-
Force include classes in critical CSS
Critical CSS build by Addy Osmani is a useful library that extracts and inlines critical-path CSS in HTML pages.
What are some alternatives?
esbuild - An extremely fast bundler for the web
vite - Next generation frontend tooling. It's fast!
UglifyJS2 - JavaScript parser / mangler / compressor / beautifier toolkit
penthouse - Generate critical css for your web pages
closure-compiler - A JavaScript checker and optimizer.
PostCSS - Transforming styles with JS plugins
Sass - Sass makes CSS fun!
prettier - Dockernized prettier. This is an opinionated code formatter.
Nuxt.js - Nuxt is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue 3. [Moved to: https://github.com/nuxt/nuxt]
purgecss - Remove unused CSS
rollup-react-example - An example React application using Rollup with ES modules, dynamic imports, Service Workers, and Flow.
minification-benchmarks - πββοΈπββοΈπ JS minification benchmarks: babel-minify, esbuild, terser, uglify-js, swc, google closure compiler, tdewolff/minify