Here's how to (hopefully) improve the initial load performance of your ember-cli project.
- Add this
gulpfile.js
to any ember-cli project - Run
yarn add critical gulp --dev
- Change the
build
script in package.json toember build -prod; gulp critical
- Run
yarn build
Now, gulp will run the critical
task once after each build. The critical task checks what CSS your app needs to render the initial route and puts it inline in your dist/index.html
.
@ianpetzer I believe you'd have to create an ember-cli addon and use some Broccoli hooks. But didn't look into it.
And I think we can get rid of gulp and use
cat index.html | critical --inline > index.tmp && mv index.tmp index.html
directly.