Support Tree Shaking though module field

[jwickens]

Apollo Client supports tree shaking through the module field in package.json. React-apollo however serves a transpiled and minified file only. The combination of react-apollo, apollo-client and graphql add 300kb to my build.

[jwickens]

graphql/graphql-js#843

[jbaxleyiii]

@jwickens I would love to support this! Do you have any experience setting it up?

@helfer who did this work for AC?

[helfer]

@jbaxleyiii I believe it was @kamilkisiela who did this for Apollo Client.

[jbaxleyiii]

awesome!

Looks like apollographql/apollo-client#1069, apollographql/apollo-client#1130, and apollographql/apollo-client#1177 will be a good place to start!

@jwickens I'll work on this as soon as I can!

[jbaxleyiii]

@jwickens I've deployed a version as react-apollo@next would you be open to giving it a shot?

[jbaxleyiii]

If anyone is able / willing, I'm working to support tree shaking for react-apollo. If you have an app (one that would use tree shaking OR one that that doesnt), I'd love for some volunteers to try it out! npm i --save react-apollo@next. If / when you run into issues with the build, can you report them here!

[larixer]

@jbaxleyiii I've checked react-apollo@next and it works without issues with our Apollo isomorphic starter kit:
https://github.com/sysgears/apollo-fullstack-starter-kit

However because we are using Webpack 2 and ES6 Tree Shaking is known to not work with Webpack 2:
webpack/webpack#2867
the effect is neglible, the bundle size is only 600 bytes less with react-apollo@next compared to [email protected]

[jbaxleyiii]

@Vlasenko thats great news! I'll take any savings I can get! Along with the linked PR, I'm going to move withApollo into its own file (still exported at the root). Then I'll release this as a minor version bump and see how it goes in the wild!

Thanks for testing it!

[jwickens]

@jbaxleyiii I can confirm that the savings are neglible in my repo too, we will have to wait until webpack 2.5 is released to see the profit.

Another benefits could be source maps. However one issue i'm seeing is with source map support I'm getting the following error:

/~/apollo-client/transport/Deduplicator.js
Cannot find source file '../../../src/transport/Deduplicator.ts': Error: Can't resolve '../../../src/transport/Deduplicator.ts' in '/Users/jonathanwickens/dev/h-agent-app/node_modules/apollo-client/transport'

This is because the source map in lib refers to the src dir which is not published to npm.

For those using webpack you should be in theory able to use source maps of imported modules with

 {
        test: /\.js$/,
        use: ['source-map-loader'],
        enforce: 'pre'
  },

@jdwuarin this should eventually help you with your debugging issues