Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch build tooling to tsup and modernize JS build artifacts #1032

Merged
merged 5 commits into from
Apr 15, 2023

Conversation

markerikson
Copy link
Contributor

@markerikson markerikson commented Apr 10, 2023

This PR builds on top of the Immer 10 work in #1028 :

  • Switches the build setup from tsdx to tsup
    • Updates the target JS output to be ES2020-ish (ie no transpiling at all)
    • Replaces the __DEV__ flags with process.env.NODE_ENV checks
  • Rearranges the build artifacts output to match what I've been setting up over in the various Redux repos for our next major releases. This combo appears to work well with all major build systems I've tested against, albeit with a "FalseCJS" warning from arethetypeswrong, which I'm ignoring for now
    • Adds an additional "legacy ESM" build that targets Webpack 4 for use with the "module" key, by using a .js extension and targeting ES2017 syntax (transpiling optional chaining and object spreads)
  • Adds a micro-optimization by extracting Object.getPrototypeOf to a variable for better minification

This shaves a few KB off the size of a production build. For the minified CJS Prod artifact:

  • Immer 9.0.21: 16153b
  • Immer 10.0.beta.6: 16535b
  • This PR: 13680b

The minified production .mjs artifact is even smaller, at 12941b

@karlhorky
Copy link

Nice, thanks for this @markerikson ! 🙌

with a "FalseCJS" warning from arethetypeswrong

Wonder if this PR discussion between @andrewbranch and @Andarist helps at all to try to resolve this error, it is also mentioning tsup and CommonJS:

@mweststrate mweststrate merged commit d5be8f2 into immerjs:immer-10 Apr 15, 2023
@mweststrate
Copy link
Collaborator

mweststrate commented Apr 15, 2023

Awesome, thanks so much for introducing tsup, this looks so much better! Just merged the changes, with one minor change; I changed the NODE_ENV==="development" to NODE_ENV!=="production" to make development and test behave the same. I'm not sure whether there is a convention around this, if so, I can revert that and use different env config in the tests instead.

Interestingly enough, after gzip etc the difference is especially reducing the MapSet plugin :) 46cd1d5#diff-9eca5a1e442f863695367206f19cbb2b6c0aab0da2211ba0f6b9194c2fcfdb12

Anyway, thanks so much for this PR!

@mweststrate
Copy link
Collaborator

mweststrate commented Apr 15, 2023

Ah, just noticing that the internal fields aren't minified yet, so the build can be a bit smaller still.

12941 -> 11498 :)
41ebbbc

@markerikson
Copy link
Contributor Author

Awesome, glad this worked out!

Let me know when you've got a new beta published!

@markerikson
Copy link
Contributor Author

markerikson commented Apr 16, 2023

@mweststrate One more possible trick I found. Turns out tsup supports using Terser for minification instead of ESBuild. I'm in the process of switching RTK over to use tsup, and here's how you configure it:

except that I just tried looking at the sourcemaps and they seem very badly busted :( Scratch that idea.

          minify: minify ? 'terser' : false,
          terserOptions: minify
            // usual Terser options here
            ? {
                output: {
                  comments: false,
                },
                compress: {
                  keep_infinity: true,
                  pure_getters: true,
                  passes: 10,
                },
                ecma: 2020,
                toplevel: true,
              }
            : undefined,

@mweststrate
Copy link
Collaborator

mweststrate commented Apr 16, 2023 via email

@markerikson
Copy link
Contributor Author

@mweststrate : Terser is a bit better at minifying than ESBuild.

That said, I just tried copy-pasting your previous Terser settings over, and it was only like 50 bytes smaller and the sourcemaps were borked. So, sticking with ESBuild is probably the best option here.

@github-actions
Copy link
Contributor

🎉 This PR is included in version 10.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants