hacktoberfest-2022

A repo for open source contribution

Size Limit

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.

ES modules and tree-shaking support.
Add Size Limit to Travis CI, Circle CI, GitHub Actions or another CI system to know if a pull request adds a massive dependency.
Modular to fit different use cases: big JS applications that use their own bundler or small npm libraries with many files.
Can calculate the time it would take a browser to download and execute your JS. Time is a much more accurate and understandable metric compared to the size in bytes.
Calculations include all dependencies and polyfills used in your JS.

With GitHub action Size Limit will post bundle size changes as a comment in pull request discussion.

With --why, Size Limit can tell you why your library is of this size and show the real cost of all your internal dependencies. We are using Statoscope for this analysis.

Who Uses Size Limit

MobX
Material-UI
Autoprefixer
PostCSS reduced 25% of the size.
Browserslist reduced 25% of the size.
EmojiMart reduced 20% of the size
nanoid reduced 33% of the size.
React Focus Lock reduced 32% of the size.
Logux reduced 90% of the size.

How It Works

Size Limit contains a CLI tool, 3 plugins (file, webpack, time) and 3 plugin presets for popular use cases (app, big-lib, small-lib). A CLI tool finds plugins in package.json and loads the config.
If you use the webpack plugin, Size Limit will bundle your JS files into a single file. It is important to track dependencies and webpack polyfills. It is also useful for small libraries with many small files and without a bundler.
The webpack plugin creates an empty webpack project, adds your library and looks for the bundle size difference.
The time plugin compares the current machine performance with that of a low-priced Android devices to calculate the CPU throttling rate.
Then the time plugin runs headless Chrome (or desktop Chrome if it’s available) to track the time a browser takes to compile and execute your JS. Note that these measurements depend on available resources and might be unstable. See here for more details.

Usage

JS Applications

Suitable for applications that have their own bundler and send the JS bundle directly to a client (without publishing it to npm). Think of a user-facing app or website, like an email client, a CRM, a landing page or a blog with interactive elements, using React/Vue/Svelte lib or vanilla JS.

Show instructions

Install the preset:

$ npm install --save-dev size-limit @size-limit/file

Add the size-limit section and the size script to your package.json:

+ "size-limit": [
+   {
+     "path": "dist/app-*.js"
+   }
+ ],
  "scripts": {
    "build": "webpack ./webpack.config.js",
+   "size": "npm run build && size-limit",
    "test": "jest && eslint ."
  }

Here’s how you can get the size for your current project:

$ npm run size

  Package size: 30.08 kB with all dependencies, minified and gzipped

Now, let’s set the limit. Add 25% to the current total size and use that as the limit in your package.json:
```
  "size-limit": [
    {
+     "limit": "35 kB",
      "path": "dist/app-*.js"
    }
  ],
```

Add the size script to your test suite:

  "scripts": {
    "build": "webpack ./webpack.config.js",
    "size": "npm run build && size-limit",
-   "test": "jest && eslint ."
+   "test": "jest && eslint . && npm run size"
  }

If you don’t have a continuous integration service running, don’t forget to add one — start with [Travis CI].

its-garun / hacktoberfest-2022-third Goto Github PK