Skip to content

Latest commit

 

History

History
75 lines (52 loc) · 3.46 KB

ch15.md

File metadata and controls

75 lines (52 loc) · 3.46 KB
Raw

Chapter 15: Production

Preparing code for production

Before you ship your code to production you may need to bundle your JS files to avoid serving too many files.

In this book we use esbuild - an extremely fast JS bundler used internally by Snowpack.

Add snowpack.config.js:

export default {
    optimize: {
        bundle: true,
        minify: true,
        target: 'es2015',
    },
};

Time to build your project: npm run build

esbuild will generate a build directory with the optimized production code.

Verify your production distribution locally: http-server build

Deploying code to Netlify

We're using Netlify to host this project. In the following figure, you will find the deployment settings:

Figure: Netlify deployment settings

Once you connect your Github repo to Netlify configure:

  • branch to deploy: we're using a branch called deploy. On main, there is a lightweight setup without a bundler.
  • build command: npm run build from the previous step
  • publish directory: build a default esbuild directory

Every time you push to the branch, Netlify will deploy a new version.

You can find the latest deployed version here: https://hyperposts.netlify.app/

Optimizing code size

One of the most underrated performance optimizations is using lighter frameworks and libraries.

Use bundlephobia to check the size of your dependencies (minified+gzipped):

To make this comparison relevant here are some of the popular libraries:

Using Hyperapp is a performance optimization in and of itself. In other words, with Hyperapp you're paying a much much lower performance tax than in Angular, React, or Vue. No matter how many performance optimizations you apply to them, they will never match the load time performance of unoptimized Hyperapp. And that's what we call a performance pit of success. Or a negligible performance tax.

The received wisdom that you need to choose between developer experience and load time performance becomes a false dichotomy. No matter what performance metric you choose be it FCP, LCP, TTI, FID, TBT you'll be fine. Even if you're scratching your head thinking: WTF are those metrics (WTF stands for "What's this for").

Check your application bundle size in the browser:

Figure: Bundle size with minification and Brotli compression

With minification and Brotli compression (from the Netlify server), the application is around 10kB. It easily fits into most real-world performance budgets. It means that Hyperapp is a great tool when you need to build apps for the network and CPU constrained devices, without sacrificing developer experience.