Ember Octane Fundamentals

Production Build Performance

Mike North

Mike North

Stripe
Ember Octane Fundamentals

Check out a free preview of the full Ember Octane Fundamentals course

The "Production Build Performance" Lesson is part of the full, Ember Octane Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Mike generates a production build of the application using the Ember build --prod command and a production-grade server, and then demonstrates how to audit performance within the browser.

Preview
Close

Transcript from the "Production Build Performance" Lesson

[00:00:00]
>> Mike North: The last thing I want us to do is make a production build of this app and run it through a performance audit. So we can see what we’ve built and how it will perform in a resource constrained environment like on a mobile device. The way you build a production flavor of an Ember app which is all uglified and minified and all of the development's specific code is stripped out.

[00:00:28]
You just do ember build prod. This takes a little while cuz there's a lot of work to be done and a lot of JavaScript to chew through. It should spit out all of our files. Then what we're gonna do is use a production grade asset server that I have built in the slash server folder for you.

[00:00:53]
That this is the kinda thing that I would be comfortable deploying to production, but it's not running Ember CLI, it's just a Node and Express app that uses a fast boot app server to spin up 8 workers. I think by default it’s one per core on whatever machine you have so request comes in and it picks whichever worker hasn’t been working much so let’s see how that works.

[00:01:21]
NPM start.
>> Mike North: So there we go. The reason you see so much logging here, it's like these are all of the process IDs. These are 12 core machines, thinks it's a 12 core machine. Now that our production build has completed, or going to run lighthouse in a browser to see how this performs in a resource constrained environment like on a low to mid-tier mobile device.

[00:01:48]
We wanna make sure that we use an incognito tab to do this so that you can be sure that no Chrome extensions interfere with the testing. So here's my incognito tab. I wanna paste in a URL. Obviously I'm not logged in because this is an incognito tab, and I'm starting out with clean cookies, so let's select an user, log in, and now we can go to audits, and we will throttle down to 3G.

[00:02:21]
Leaves clear storage unchecked for return visit and it's running through all of it's tests. So, the scores pretty well, at 0.7 seconds. We can try clearing this out and not throttling it.
>> Mike North: And we're at the point two second range. I showed 0.1 at the beginning and I got a little unlucky this time.

[00:02:55]
But this is really, really, really fast. Now of course we're running everything on local host, and so real networking conditions will always add to that, but they'll add to anything. Whatever apps you're building, you start at some number and then you add networking and stuff on top of that.

[00:03:15]
So we're starting at 0.2 seconds. And that’s got a lot of head room for other things to be slow so if you throw this on a CDN, it’s still gonna be blazing fast. If you have a slowish API behind it, it’s still gonna be really fast so this is showing us that Ember Octane has hit its goal by being high performance.

[00:03:40]
And making it so that we can target these resource constrained devices.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now