Webpack 4 can reduce the bundle size from 363 kB down to 152 kB

[pdehaan]

TL;DR: Updating to webpack@4 and setting it to -p (production mode) can shrink our api.js bundle size from ~363 KB down to a svelte ~152 KB.

---

I noticed that the generated api.js bundle isn't minimized. Attempting to run $ SKIPLINT=1 npm run build produces a 363 kB bundle.

$ SKIPLINT=1 npm run build

...
Hash: 8a920578861fd8b18a2d
Version: webpack 2.7.0
Time: 488ms
 Asset    Size  Chunks                    Chunk Names
api.js  363 kB       0  [emitted]  [big]  main

Trying to use $ npm run build -- -p to get a production/minimized build, throws errors about uglify.js:

ERROR in api.js from UglifyJs Unexpected token: name (e) [api.js:408,8]

Updating webpack seems to help, but has a few hiccups (like needing to install webpack-cli). But ultimately, running webpack@4 in "production" mode reduces the bundle size from 363 kB down to 152 kB:

$ npm i webpack@latest webpack-cli -D
$ SKIPLINT=1 npm run build -- -p

...
Hash: 2ef86f15569fd6617428
Version: webpack 4.16.5
Time: 3312ms
Built at: 2018-08-15 15:34:38
 Asset     Size  Chunks             Chunk Names
api.js  152 KiB       0  [emitted]  main

[gregglind]

Good finding!

On Wed, Aug 15, 2018 at 5:55 PM Peter deHaan notifications@github.com wrote:

I noticed that the generated api.js bundle isn't minimized. Attempting to run $ SKIPLINT=1 npm run build produces a 363 kB bundle.

$ SKIPLINT=1 npm run build

... Hash: 8a920578861fd8b18a2d Version: webpack 2.7.0 Time: 488ms Asset Size Chunks Chunk Names api.js 363 kB 0 [emitted] [big] main

Trying to use $ npm run build -- -p to get a production/minimized build, throws errors about uglify.js:

ERROR in api.js from UglifyJs Unexpected token: name (e) [api.js:408,8]

Updating webpack seems to help, but has a few hiccups (like needing to install webpack-cli http://npm.im/webpack-cli). But ultimately, running webpack@4 in "production" mode reduces the bundle size from 363 kB down to 152 kB:

$ npm i webpack@latest webpack-cli -D $ SKIPLINT=1 npm run build -- -p

... Hash: 2ef86f15569fd6617428 Version: webpack 4.16.5 Time: 3312ms Built at: 2018-08-15 15:34:38 Asset Size Chunks Chunk Names api.js 152 KiB 0 [emitted] main

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mozilla/shield-studies-addon-utils/issues/257, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKAjwKgO5-aHIP8DkdvEK9ve8brvpm5ks5uRKbcgaJpZM4V-76a .

[pdehaan]

I don't know if we care about schema.json filesize, but it looks like if we minify that file we can drop the payload from 23KB down to 13KB.

Not sure if study authors ever need to be able to read/edit that file though, or if it just gets blindly copied over via the $ copyStudyUtils ... script:

$ jq -c . < webExtensionApis/study/schema.json > webExtensionApis/study/schema.min.json

$ ls -lash webExtensionApis/study/schema*
48 -rw-r--r--  1 pdehaan  staff    23K Aug 15 15:53 webExtensionApis/study/schema.json
32 -rw-r--r--  1 pdehaan  staff    13K Aug 15 16:06 webExtensionApis/study/schema.min.json
40 -rw-r--r--  1 pdehaan  staff    18K Aug 15 15:30 webExtensionApis/study/schema.yaml

[motin]

Not minimizing the files helps study authors and utils maintainers debug potential issues in utils more intuitively. I don't think the browser log supports the use of sourcemaps - if it does, then awesome. Otherwise, I'd rather see at least api.js remain unminified.

[motin]

Closing this since there are no plans on prioritizing minimized bundle size over ease of troubleshooting study add-ons