Script size

General information

• SDK version: 3.x
• Environment: both
• Browser and OS all

Issue description

The generated dist/index.js is pretty big and drastically increases the size of release bundles. This is especially painful when the only thing being used is client and hostedFields, which is a pretty common scenario. let {client, hostedFields} = require('braintree-web') is over 500k!

package.json has a browser field that redirects webpack includes to the dist folder, which also has built versions of client and hostedFields that are much larger than they need to be due to polyfills etc…

In many builds these are redundant and prevent effective tree-shaking, or reuse of existing polyfill libs.

The workaround for this is to require('braintree-web/client/index.js') directly, this prevents the ‘browser’ redirect in package.json from taking effect. By doing this, it’s possible to reduce the size of the included script massively. Webpack analyzer shows my size decreased to 50k, gzipped 14.5k. There’s probably room to decrease this even more, since a lot of the deps appear to be coming from /lib, which looks like some materialized versions of some libs that (may?) be npm installable.

While many users will need to link directly to a /dist script, the ‘browser’ field should probably be removed from package.json. That’s only going to be used by folks who already have a build solution, like webpack or browserify, and for those users it’s better to just allow webpack to follow the requires and do it’s thing.

[KasperAndersson]

Hi @crookedneighbor , When is v4 planned? The bundle size still seems to be a issue.

[719media]

@claytongulick you can try to do

import braintreeClient from 'braintree-web/client';
import braintreeHostedFields from 'braintree-web/hosted-fields';

to get what you want