Giter VIP home page Giter VIP logo

Comments (15)

spencermountain avatar spencermountain commented on August 11, 2024 1

hi Sean! yeah, i agree if it's useful to module-people, we should do it, then browserify-them-away for the package.main build. I haven't kept up with the latest best-practices, but am happy to help/merge whatever you'd like
cheers

from spacetime.

brianleroux avatar brianleroux commented on August 11, 2024 1

Update: got it mostly working in the esm branch but tests still failing.

Was pleasantly surprised to see .default thing is just a webpack config option so in this branch we build ./spacetime.js and ./immutable.js exported as commonjs2. Then module field in package.json points at the esmodules src in src/immutable.js (for now).

The on disk node_modules payload is still quite a bit bigger but it'll be interesting to play with this using unpkg and a browser.

from spacetime.

voxpelli avatar voxpelli commented on August 11, 2024 1

I added #71 as I think one the main benefits of switching to ESM could be to have the timezone data tree-shaked, which could reduce the final size of the code rather drastically I think

from spacetime.

brianleroux avatar brianleroux commented on August 11, 2024

So we use this lib in Node and the browser currently. We ship two builds. A the default build and an immutable build. The quick experiment moved to esmodules syntax and then builds using babel-plugin-add-module-exports. Its not quite completely working yet because I missed some of the .default somewhere…findable with some time…and that should fix the tests.

However that aside we do have a prelimary finding: builds are 5kb larger. 🙀

So, the challenge is can we retain the esmodules and get that number smaller. I'm sure some combo of plugins and transforms could eventually do this. And then downstream users can consume the esmodules src directly though I'm not sure what the benefit of that is yet. Tree shaking won't mean much given this thing basically just exports a constructor function for consumption. (Open to learning I'm wrong about all of this too of course.)

from spacetime.

brianleroux avatar brianleroux commented on August 11, 2024

It occurs to me that if the esmodules src gets published with the prebundled CJS src it’ll mean the on disk size of the package in node_modules will be way over 200KB. Even just the esmodules src is around 130KB. So best case 50KB larger on disk.

Also note this is the equivalent of shipping coffescript source to npm. In the past regarded as an inappropriate way of doing things because it forces downstream consumers to have a build step defined by upstream packages. Maybe this is better now that there’s some agreement on the syntax of esmodules but does mean rewriting to match the .default semantics.

Still open to cracking this nut but I want to remain clinical about our chosen trade offs and why.

from spacetime.

brianleroux avatar brianleroux commented on August 11, 2024

Update!1!! I got it totally working. Tests and lint are passing. I also figured out a sorta-hacky way to support esmodules alongside the cjs source. The tradeoff is a breaking change to the interface. Instead of the library exporting Spacetime as the main and then bundling spacetime/immutable the library now exports an object that looks like this {Spacetime, ImmutableSpacetime}.

And the best news! Entire on disk node_modules payload is smaller at 76KB!!

The build uses Webpack for creating a UMD bundle of spacetime that package.jsonmain points at and then Rollup for creating an esmodules build package.jsonmodule points at.

I also had to use babel-register to get the the tests working. So its quite a bit of devDeps to make this happen but interesting exercise nonetheless. Webpack, Rollup and Babel. I sort of had Buble in there with Webpack for a bit too. So the size challenge is met but this still feels very brittle! Needs more testing/hardening/eyeballs. 🕵️‍♀️

from spacetime.

spencermountain avatar spencermountain commented on August 11, 2024

wow! nice work brian. i just checked it out and things look great.

.... just thinking aloud -
it's safe to assume the module version will support all-the-fancy es6 right? i guess we can take liberties with that version, and write things in the most terse way now. Wasn't rollup the one that pre-ran for-loops and stuff? we can push this stuff hard

nice work!

from spacetime.

brianleroux avatar brianleroux commented on August 11, 2024

Yeah I think so but we'll want to make the CJS build a bit conservative to support, at least, Node 6.10 --- think this last commit fixes that by adding a rollup/babel plugin. Bumps cjs source filesize up to 42KB tho!

Def interested to see if we can get that es.js file smaller. Was thinking ./fns.js and ./methods.js could consolidate into ./methods for example. I removed the package.json import (for now) to see if there's a way to get just the .version string in via plugin somehow.

from spacetime.

spencermountain avatar spencermountain commented on August 11, 2024

punting this refactor for now, as it's a good idea, but it required a breaking top-level api change, for the immutable/mutable stuff, and increased the filesize a bit.
afaik, the browserify exports still works with cjs, but if anyone has ideas for a quick-fix, i'm in.
will leave this open

from spacetime.

brianleroux avatar brianleroux commented on August 11, 2024

Yes, I agree. It is a bit disappointing but this was a nice experiment and, objectively, esmodules cost/benefit isn't there yet.

from spacetime.

TheLarkInn avatar TheLarkInn commented on August 11, 2024

Wow how did I miss this thread until today. (Sorry been migrating GitHub emails). Let me catch up here. So did i see that modules are a branch? Also, you had found builds are smaller still?

Maybe a tl;dr will catch me up.

from spacetime.

brianleroux avatar brianleroux commented on August 11, 2024

tl;dr we managed to get the payload of it smaller IF we pre-bundled the esm/cjs source but that gains us little a breaking API change for a marginal payload win and a much more involved set of deps and build gymnastics to support it. kinda not worth imo but we'll keep this PR open and play with it time to time to see if the space matures.

from spacetime.

spencermountain avatar spencermountain commented on August 11, 2024

been thinking more about this, open to any recommendations.

the advice usually is to use es-modules internally, then babel-them-away for the 'main' build.

but i've seen webpack complaining about main pointing to a built file...

so to avoid breaking any node projects, my gut says main should still point to ./src.
and ./src should be cjs until node supports modules.

but I saw this and thought it was a nice solution:
image

is there a good way to spin our build into a .mjs file, while keeping the various benefits of modules?

This stuff still hurts the brain, but module support is like 80% in caniuse now! People are doing some neat stuff and we should support it.

from spacetime.

spencermountain avatar spencermountain commented on August 11, 2024

hey, i got a .mjs branch working, and made a rollup esm build, feel free to play around with it if anyone's interested.

i could be convinced otherwise, but I think it's probably still too early to merge this. I think I got to the same point as brian did a year ago. Lovely idea, still too weird.

from spacetime.

spencermountain avatar spencermountain commented on August 11, 2024

hey there - v5.1.0 publishes a .mjs build, which is linked as 'module' in the package.json.

... I guess that's it?
thanks for your patience.
props to rollup!

from spacetime.

Related Issues (20)

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.