size-limit
Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit. (by ai)
terser
π JavaScript parser, mangler and compressor toolkit for ES6+ (by terser)
Our great sponsors
size-limit | terser | |
---|---|---|
6 | 27 | |
6,411 | 8,402 | |
- | 1.2% | |
8.6 | 8.9 | |
29 days ago | 16 days ago | |
JavaScript | JavaScript | |
MIT License | GNU General Public License v3.0 or later |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
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.
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.
size-limit
Posts with mentions or reviews of size-limit.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2022-09-14.
-
How to build tree-shakeable JavaScript libraries
However, you can use the Size Limit library to control the size of a bundle or individual exports. Hereβs an example configuration:
-
Trim the fat: tips for keeping bundle size small ποΈ
It's always good to keep track of these things over time so performance doesn't slide. Parcel, which I used for this project, has a helpful bundle analyzer (similar to the one for Webpack) that gives a nice visual overview of a project's bundle. This is especially helpful for identifying bundled dead code coming from packages that could be avoided with tree-shaking. There are also plenty of tools you can integrate with CI to enforce bundle size.
-
Understanding nouns with tinyplural
TSDX is a great package for npm packages like this and even bundles with size-limit to check your gzipped final bundle size. Keeping a tiny package was really important to me so there are 0 dependencies and size-limit made me realise that simplifying all of my checking functions into 1 or 2 core functions that took options would be a better strategy and help reduce the code size.
-
Codebytes: Shorter UUIDs with collision prediction using nanoid
Small. 130 bytes (minified and gzipped). No dependencies Size Limit controls the size.
-
7 Trending projects on GitHub for JavaScript developers
Size Limit is a performance budget tool for JavaScript. It checks every commit on CI, calculates the real cost of your JS for end-users, and throws an error if the cost exceeds the limit. Link: https://github.com/ai/size-limit
-
Egghead's State Management Portfolio Club Journey - Week 1: An RDD Approach
-Mark Erikson and Joel Hooks talk on Redux -When and when not to reach for Redux -Redux Introduction -Egghead course by Dan Abramov on Fundamentals of Redux -RDD article by Tom Preston Werner -Another Article on RDD -Article on writing a great Readme -RDD Readme Example: size-limit
terser
Posts with mentions or reviews of terser.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2023-10-18.
-
Obfuscating your create react app and routes
During my intial search i came across some outdated libraries like javascript-obfuscator and uglify-js(as if javascript code can get any uglier, am I right?). Then, I stumbled upon Terser, a modern library that supports ES6.
-
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.
-
React Native CI/CD build speed improved by 22% with one line of code
Every release build of React Native uses terser to reduce the size of your JavaScript. And it operation can be omitted for Staging/Beta builds.
-
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.
What are some alternatives?
When comparing size-limit and terser you can also consider the following projects:
GrapesJS - Free and Open source Web Builder Framework. Next generation tool for building templates without coding
esbuild - An extremely fast bundler for the web
tsdx - Zero-config CLI for TypeScript package development
vite - Next generation frontend tooling. It's fast!
tsdx - Zero-config CLI for TypeScript package development [Moved to: https://github.com/jaredpalmer/tsdx]
UglifyJS2 - JavaScript parser / mangler / compressor / beautifier toolkit
nanoid.
closure-compiler - A JavaScript checker and optimizer.
Plyr - A simple HTML5, YouTube and Vimeo player
Sass - Sass makes CSS fun!
three.js - JavaScript 3D Library.
PostCSS - Transforming styles with JS plugins