Prerequisite:

Setup

Stuck?

Check out the changes https://github.com/pearlbea/bloaty-mcbloatface/pull/1

Lighthouse Performance Audit

• Run Bloaty McBloatface in production mode with the following command:
  • $ yarn run prod
• Open Chrome Dev Tools “Audit” tab

• If you are on Chrome 67+ set "emulation" to "3G w/ CPU slowdown"
• Perform audit on the /stories/:id and /users/:id pages
• Write down the "first interactive" time for each page

Split up some code

• Create a "story" pack, similar to the application pack

  • Update app/javascript/packs/story.ts to import app/javascript/story.ts and init it
  • Remove story import and init from app/javascript/app.ts

• Add the "story" pack to the view

  • Enable content_for(:js) in app/views/layouts/application.html.erb

  • Add content_for(:js) block with a javascript_pack_tag to app/views/stories/show.html.erb

    For guidance see the content_for docs

• Split "users" pack from app

  • Remove users import in app/javascript/packs/application.ts
  • Enable users javascript_pack_tag in app/views/layouts/users.html.erb

Re-run the audit

• Restart yarn run prod if you have not already
• How have the numbers changed?
• Note: you should use the same story/user pages as the initial run

★ Extra credit