search

segmentio / analytics-next

Segment Analytics.js 2.0
https://segment.com/docs/connections/sources/catalog/libraries/website/javascript
MIT License
413 stars 139 forks source link

CommonJS to ESM Modules #632

Open mtpultz1977 opened 2 years ago

mtpultz1977 commented 2 years ago

The use of CommonJS was initially intended for backend development back in the 2009/2010 when initially introduced, but when used on the frontend it prevents proper tree shaking within applications, and can result in large bundle sizes.

Is there roadmap for transition from CommonJS to ESM Modules?

pooyaj commented 2 years ago

@mtpultz1977 @segment/analytics-next supports both CJS and ESM: https://github.com/segmentio/analytics-next/blob/master/packages/browser/package.json#L10-L11 ... are you seeing any issues?

mtpultz1977 commented 2 years ago

@pooyaj when using this with Angular you get this warning during builds:

Warning: /Users/xxxxxxxx/Projects/xxxxxxxx/website/workspace/node_modules/@segment/analytics-next/dist/pkg/plugins/routing-middleware/index.js depends on '@segment/tsub'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

It's the reliance on @segment/tsub

mtpultz1977 commented 2 years ago

It looks like there are several other dependencies outside of @segment/tsub that all use CommonJS:

  1. spark-md5
  2. @segment/facade
  3. @segment/analytics.js-video-plugins/dist/index.umd.js

Warning: /Users/xxxxxxxx/Projects/xxxxxxxx/website/workspace/node_modules/@segment/analytics-next/dist/pkg/core/events/index.js depends on 'spark-md5'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/xxxxxxxx/Projects/xxxxxxxx/website/workspace/node_modules/@segment/analytics-next/dist/pkg/plugins/ajs-destination/index.js depends on '@segment/facade'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/xxxxxxxx/Projects/xxxxxxxx/website/workspace/node_modules/@segment/analytics-next/dist/pkg/plugins/legacy-video-plugins/index.js depends on '@segment/analytics.js-video-plugins/dist/index.umd.js'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

mtpultz1977 commented 2 years ago

Added an issue to @segment-facade, but not sure where to add an issue for @segment/analytics.js-video-plugins/dist/index.umd.js, and I guess this issue raises the reliance on the spark-md5 third-party dependency.

joostburg commented 2 years ago

We have implemented analytics-next with react context as described in the readme and got an 150kb increased main bundle. That's insane for some simple tracking. When I check bundlephobia you will see an loadLegacySettings export that's 25kb.

hatton commented 1 year ago

I assume this is the issue y'all are discussing, and for my future self. To fix Module not found: Error: Can't resolve 'spark-md5' in 'C:\dev\lameta\node_modules\@segment\analytics-core\dist\esm\events' with node 16, I had to add "spark-md5" as an explicit dependency.