Giter Club home page Giter Club logo

rollup-plugin-size-snapshot's Introduction

@brodybits/rollup-plugin-size-snapshot

fork with update to use Webpack v5, as needed with Node.js 17 ref: webpack/webpack#14532 (comment 985083189)

npm (scoped)

This plugin provides details about

  • actual bundle size (bundler parsing size)
  • minified bundle size (browser parsing size)
  • gzipped bundle size (download size)

All of these sizes are important criteria when choosing a library, and they will be stored in the .size-snapshot.json file.

There is also a nice feature for the es output format which provides sizes of treeshaked bundles with both rollup and webpack, so if your library has more than one independent parts, you can track that users will not consume dead code. Such bundles entry point looks like this

// nothing is imported here so nothing should go in user bundle
import {} from "library";

Why bundle with rollup

  • internals are hidden so you shouldn't worry that user reuses your frequently updated modules
  • faster user bundling if library has a lot of modules
  • predictable and more efficient scope hoisting and as a result more predictable size
  • easier to work without sourcemaps with vendors since development bundlers add a lot of unreadable stuff in module definition

Recommended installation

It is recommended to install this fork as a npm alias, for example:

yarn add --dev rollup-plugin-size-snapshot@npm:@brodybits/rollup-plugin-size-snapshot@latest

The usage below assumes this kind of installation for this fork.

Usage

import { sizeSnapshot } from "rollup-plugin-size-snapshot";

export default {
  input: "src/index.js",
  output: {
    file: "dist/index.js",
    format: "es",
  },
  plugins: [sizeSnapshot()],
};

If you use uglify or terser plugins, then make sure they are placed after this one.

import { uglify } from "rollup-plugin-uglify";
// or import terser from "@rollup/plugin-terser";
import { sizeSnapshot } from "rollup-plugin-size-snapshot";

export default {
  // ...
  plugins: [sizeSnapshot(), uglify({ toplevel: true })],
};

Options

snapshotPath

type: string default: '.size-snapshot.json'

matchSnapshot

This option allows you to verify that contributors don't forget to build or commit the .size-snapshot.json file. If this is true, the plugin will validate the snapshot against an existing one. Typically, one would define this option's value as true during continuous integration; using it locally is unintended.

type: boolean default: false

threshold

Possible difference between sizes in actual snapshot and generated one.

Note: Make sense only when matchSnapshot is true.

type: number default: 0

printInfo

Allows you to disable log to terminal.

type: boolean default: true

License

MIT © Bogdan Chadkin

rollup-plugin-size-snapshot's People

Contributors

brodybits avatar dependabot[bot] avatar eps1lon avatar francois-esquire avatar geotrev avatar kylemh avatar michaeldeboey avatar mohsinulhaq avatar transitive-bullshit avatar trysound avatar

Watchers

 avatar  avatar  avatar  avatar

rollup-plugin-size-snapshot's Issues

Update GItHub CI

  • add Node.js v20
  • remove Node.js 19
  • remove Node.js 14

Note: It may be interesting to see oldest Node.js version that this will work on.

related:

RFC: retire patch-v0.7.x branch & Rollup 0.x support

I am now maintaining patch-v0.7.x branch to support react-recompose with Rollup 0.x, with some upcoming updates as discussed in issue #8.

Assuming that I can update react-recompose to use Rollup v2(+), with updates from main branch of this plugin, then I would like to drop support for Rollup 0.x from patch-v0.7.x branch.

Support for Rollup 3

Hello there!

Thanks for creating this package and maintaining it. I was wondering if there is any intent to adopt Rollup 3 support as a peer dependency in the near future?

Thanks!

issues with blank source or only comments

(updated)

While investigating #17 further I have discovered some issues if the code is blank or has only comments.

I added some tests in fd305a4. I discovered a case where it started reporting an internal error rather than "No content" from Webpack, introduced in commit 03f414a in patch release v0.13.3.

I have improved the error reporting in this case with a temporary workaround solution in 79a2ac5.

May need to investigate how Webpack would handle this kind of input in real life.

Error thrown by Terser is not handled

Hi there, we've encountered a problem when the minified source does not output code. Found on this line here, the error from terser v4.8.0 is not handled, but rather we see an error where the length of the minified code has no length (found here).

[!] (plugin size-snapshot) TypeError: Cannot read properties of undefined (reading 'length')

Wondering if the solution below would be welcomed to throw this error (pseudo-code):

const { code: minified, error: minifiedError } = minify(source);

if (minifiedError) {
  throw minifiedError;
}

Happy to open up a pull request to patch.

terser error - needs reproduction

A couple issues were reported with handing errors from Terser:

A solution was proposed in issue #17, but I would need a reproduction in order to make a test case for this.

Any reproduction from the user community would be highly appreciated.

test dist build

I think it would be nice to find a way to test the dist build, in a similar fashion to how I added CI dist build testing to react-recompose.

Prettier does this in a much more elaborate way when building new releases.

update dependencies in v.0.7.x post-RC patch release

(updated)

Updates wanted for more stable v.0.7.2 patch release to be made from patch-v0.7.x branch:

  • switch from unsupported rollup-plugin-replace to @rollup/plugin-replace (as now proposed in PR #8)
  • drop support for Rollup pre-0.68 (as now proposed in PR #8)
  • update some other dependencies (as now proposed in PR #8)

prerequisite: #7

GENERAL RATIONALE:

  • It would be ideal to switch away from outdated Rollup plugin, if possible in patch-v0.7.x branch:
  • Considering that @rollup/plugin-replace is not officially supported with Rollup pre-1.0, it would be ideal to avoid the need for testing & support with older Rollup 0.x versions if possible

UPDATED PREREQUISITE(S):

SOME IMPORTANT NOTES:

  • removing support for Rollup pre-0.68 is a BREAKING CHANGE and assumes:
    • the recent v0.7.1-rc1 version of this fork is not to be considered "stable" (as now described in a commit message in PR #8)
    • downstream react-recompose is upgraded to use Rollup 0.68 (see TODO item above)
  • switch to @rollup/plugin-replace with Rollup pre-1.0 results in an ugly installation warning message (tradeoff vs using unsupported Rollup plugin package, as described in a commit message)

general strategy for stable patch-v0.7.x release:

First release from patch-v0.7.x (v0.7.1-rc1) was not intended to be 100% stable, and it is now desired to drop Rollup pre-0.68 support as described above. Now that a version patch-v0.7.x is working with react-recompose, it is desired to make a more stable v0.7.x patch release with the changes described above.

Support & test with multiple versions of Rollup

I would like to support with both Rollup v2 & Rollup v3, as already proposed in PR #25 (in response to issue #24).

The hard part is adding GitHub CI testing with both Rollup v2 & v3, as the produce slightly different sizes as we can see in PR #25.

I think the best approach would be to define a special environmental variable in case of Rollup v2, in which case the tests would either expect different size results or expect some greater size variance.

/cc @geotrev

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.