Switch build tooling to tsup and modernize JS build artifacts

[markerikson]

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]

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:

• Add the types condition to the package.json#exports gxmari007/vite-plugin-eslint#60

[mweststrate]

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]

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

12941 -> 11498 :)
41ebbbc

[markerikson]

Awesome, glad this worked out!

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

[markerikson]

@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]

I noticed that ESBuild also supports mangling props, do you know if terser minifies better? Otherwise the simplicity of having a build tool less is appealing, although terser never gave any issue so far

…

On Sun, Apr 16, 2023 at 4:54 AM Mark Erikson ***@***.***> wrote: @mweststrate <https://github.com/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: 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, — Reply to this email directly, view it on GitHub <#1032 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBFZABQAV2N2VICLM3TXBNNNLANCNFSM6AAAAAAWZDLUH4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[markerikson]

@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]

🎉 This PR is included in version 10.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀