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

Webpack 4 Performance gains #39

Open
Apidcloud opened this issue Feb 15, 2018 · 3 comments
Open

Webpack 4 Performance gains #39

Apidcloud opened this issue Feb 15, 2018 · 3 comments
Assignees
Milestone

Comments

@Apidcloud
Copy link
Member

Apidcloud commented Feb 15, 2018

Just did a few tests with webpack 4 (4.0.0-beta.1):

  • dist (production and no flow-runtime): » 278Kb » 259Kb (at the time of this writing, I hadn't commited a dist production build without flow-runtime. Size was around 450Kb.)
  • browser (dev with source-map): 3.36Mb » 3.24Mb
  • umd/editor (dev with source map): 3.1Mb (update: 2.83Mb without targeting electron 😨) » 2.96 Mb (need to update this for v4 without that option as well)

Browser notes (bundle analyze addon):

  • node_modules total (parsed) size is 2.18Mb
    • flow-runtime (parsed) is close to 850Kb in dev.
    • matter-js (parsed) is close to 800Kb in dev.

I'll also create a production build for UMD as well. It makes sense to do so 👍

@Apidcloud Apidcloud added this to the Closed Beta milestone Feb 15, 2018
@Apidcloud Apidcloud self-assigned this Feb 15, 2018
@Apidcloud
Copy link
Member Author

Seems that a production build (UMD) minified with uglifyjs-webpack-plugin@1.0.0-beta.2 shrinks to 205 Kb 💯 But there are still some issues with ES6 I guess... Still trying to figure that out.

For some reason it fails to json.stringify objects within game objects (inspector related).

@Apidcloud
Copy link
Member Author

Apidcloud commented Feb 15, 2018

Ah ok, it seems mangling (uglifying variables names - e.g., xptoVariable to x) is the reason.
I'm guessing it's because inspector searches for functions with string patterns based on the variable name, and thus not finding them and breaking everything 😨

@joafalves Is this last assumption correct? Not sure we can do much here since we rely on that.

Without mangling, but working correctly, the size is shrunk to 331Kb. Also not bad 👍

And actually, uglifyjs-webpack-plugin (v.1.1.8) has that mangle option, so I'll be using that one for now. Webpack v4 should have it by default.

@Apidcloud
Copy link
Member Author

Apidcloud commented Feb 17, 2018

Hmmm almost got it working with webpack 4.x for huge performance gains.
See webpack-contrib/uglifyjs-webpack-plugin#234

Though it's changing class names and raising some errors within the editor, the inspector works just fine. Related to propertyEditorHandlerCtrl and propertyEditorCtrl.

@joafalves joafalves removed this from the Closed Beta milestone Feb 18, 2018
@joafalves joafalves added this to the v0.8 milestone Feb 18, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants