Resolving Serverless Webpack Issues

The Problem

Background

Finding the root cause

1. Debugging the bundling step

  1. The aforementioned ~5MB bundles being uploaded to Lambda were actually the gzipped and compressed versions of the functions. I was reading the values from the AWS console and didn’t realize it was the gzipped value. This also meant our minified bundles of code were larger and I soon discovered that they were closer to ~7MB.
  2. The raw bundles were roughly ~16MB of unminified code! I don’t know exactly how much additional memory webpack requires to perform all its operations, but ~16MB of JavaScript definitely seemed like it would be a problem for a limited memory machine to accomplish.

2. Understanding Webpack

  1. We weren’t running minification at all.
  2. We were converting everything to commonjs.
  3. We are using large 3rd party packages, e.g. lodash and momentjs.
  4. We didn’t have tree shaking configured correctly.

3. Exploring the bundled code

  • Our raw bundle was still too big at ~13+MB! 🤮
  • 97% of our bundle came from our node_modules 😑
  • The Twilio node library accounted for over 50% of our bundle at 7MB 🤯
After Minification: Left — graphql server handler, Right — currentUser handler
WHYBUNDLED output for twilio module

Solution Attempt #1: Patch it for later?

AdonisJS’s Configuration

Google’s Closure Compiler

TypeScript

Solution Attempt #2: Quick Wins?

  1. Exporting everything as commonjs
  2. Large package misuse
  3. No minification

Exporting everything as commonjs

Large Package Misuse

No Minification

Solution Attempt #3: ES6 Modules (FTW!)

  1. Convert statics to export named functions
  2. Move functions to their own files for export

Phase 1

After removing statics from classes: Left — graphql server handler, Right — currentUser handler

Phase 2

After converting to full ES6 Modules: Left — graphql server handler, Right — currentUser handler

Solution

Conclusion

Credits

Sources

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store