piqnt / planck.js

2D JavaScript Physics Engine
http://piqnt.com/planck.js/
MIT License
4.87k stars 236 forks source link

feat: set sideEffects to false in package.json #262

Closed zOadT closed 1 year ago

zOadT commented 1 year ago

This PR sets sideEffects to false to improve the builds for the users.

What does it do?

Some informations can be found here. In our case it will only prevent Planck from being included in the bundle if its not used (and maybe some other minor optimisations from the bundler)

// without the flag, Planck will be included in the build
// bundle even if its not used
import { Vec2 } from 'planck'

// this block is only needed to demonstrate it for TS files
// because TS removes imports that are not used.
if (false /* could also be some build flag */) {
  console.log(Vec2)
}

So yes, pretty minor thing, but also only a pretty minor change. I am currently indeed actively overriding this setting to false in a webpack config.

Is it Webpack specific?

No, even though most of the documentation you see online is for Webpack, also tools like Vite are using it.

How to test it?

You can test the change by making a simple build setup:

npm install planck webpack vite

Create a file src/index.js with the code given above (you can also use .ts for vite. For webpack you would have to add a webpack config to configure ts-loader). To test vite you also have to create a index.html at the root that includes this script tag: <script src="src/index.js" type="module"></script>. Then run

npx webpack --mode=production

or

npx vite build

and check the generated js file in the dist folder.

You can edit node_modules/planck/package.json directly to see how it changes the generated code.

shakiba commented 1 year ago

Thanks! Currently testbed has side effect (it reimplement Testbed.mount from main package), would that be a problem now, or if we want to split testbed implementation into its own build?

zOadT commented 1 year ago

Thanks! Currently testbed has side effect (it reimplement Testbed.mount from main package), would that be a problem now, or if we want to split testbed implementation into its own build?

Ah ok thanks, didn't know about that in testbed. Then we have to provide a glob of modules with side-effects (see last code example of this section)

I guess probably something like

"sideEffects": ["./dist/*-with-testbed.*"],

should work, but I have to test it if it really works with the exports field in package.json.

zOadT commented 1 year ago

The glob worked! In the above example Planck still won't be bundled, in this example it still got included in the bundle: (tested with webpack and vite)

import { Vec2 } from "planck/with-testbed";

if (false) {
  console.log(Vec2)
}
shakiba commented 1 year ago

Cool, thanks! It would great if you add some instructions, or a repo with sample project, to test it (in case someone wants to change it they know how to test it).

zOadT commented 1 year ago

Cool, thanks! It would great if you add some instructions, or a repo with sample project, to test it (in case someone wants to change it they know how to test it).

Good point! I don't really have any fancy setup, but I added a short section about how to test it.