serverless-esbuild VS serverless-webpack

Support Yarn PnP with externals bundling #327

We use serverless-esbuild to transpile our TypeScript code to JavaScript.

You should use appropriate tools to bundle your Lambda functions with a minimal size. For example, the Serverless Framework, with the serverless-esbuild plugin, automatically bundles your code and uploads it to AWS.

One of the most important aspects of serverless development is keeping an eye on your bundle sizes and to reduce cold start times on Lambda. Keeping this in mind, the template utilizes serverless-esbuild and serverless-analyze-bundle-plugin to provide function analysis out-of-the-box. I opted for serverless-esbuild over serverless-bundle for a few reasons:

Its faster and easier to setup that webpack and drastically reduces the size of the archive. For Serverless framework users there is https://github.com/floydspace/serverless-esbuild and if you use SAM CLI, you already get this for free since they now use esbuild in the build process

if you can, try using https://github.com/floydspace/serverless-esbuild - esbuild is stupid fast and it produces tiny artifacts. Its dead simple too compared to the webpacks/rollups/etc.

Since I was using serverless-webpack along with Prisma's serverless-webpack-prisma helper, this meant a bit of extra Webpack config setup to get it all using the same module syntax without the usual dreaded 'Unexpected token export' or import error from Node.

As you can see in the above handler.js file, we're getting CommonJS instead of modern JavaScript or TypeScript. To get these, you need webpack or some other bundler. serverless-webpack exists if you want full control over your ecosystem, but there is also serverless-bundle that gives you a set of reasonable defaults on webpack 4 out of the box. We opted into this option to get us started quickly.

cd app-backend/dynamodb yarn install To test the GraphQL endpoint locally on my machine, I’m using these three plugins for the Serverless Framework: Serverless Offline, Serverless Webpack and Serverless DynamoDB Local.

Serverless Webpack

The serverless framework supports an excellent workflow with the serverless-webpack plugin to package your functions individually with webpack. For AWS SAM, it's probably worth checking out the aws-sam-webpack-plugin, but I've found it far simpler to configure esbuild to perform the same task.