The headliner of this release is you can now inline CSS in the <head> of your site. This is a best practice recommended by Google's AMP project among others as you then avoid additional requests which can signifcantly slow down your site. Testing using webpagetest.org showed that moving css inline improved the Speed Index 20-50%!! In one test on a simulated 3G connection, the time to initial render went from ~1.8 seconds to ~1 second.
It's a very simple switch to make. See this commit in the default starter gatsbyjs/gatsby-starter-default@1faecb5 It's also documented at https://github.com/gatsbyjs/gatsby#inline-css
Breaking changes
post-build.jsmoved insidegatsby-node.js. If you had added apost-build.jsmodule to your code, this function should now be exported fromgatsby-node.js. A simple way to make the change is to simply requirepost-build.jsthere e.g.exports.postBuild = require('./post-build'). Thanks to @LukeSheard for this! #273- The "stages" were renamed. If you override Webpack configs and are switching behavior based on the stage,
staticis split into two stages,build-cssandbuild-htmlandproductionis nowbuild-javascript. We think these are much more sensible names. Thanks to @scottnonnenberg for the this! #253
Other notable non-breaking changes
@benstepp did a deep refactor of how we're loading Babel plugins. There shouldn't be any breaking changes but it fixes a number of bugs #279
Some highlights:
- User can override the
.babelrcpassed to webpack. - User can use whatever babel plugins they want.
- User babel config is extended with
react-hmrerather than being overwritten in develop.js. - Object.assign is now polyfilled by default.
- Non breaking change as starters previously required a babelrc and gatsby will just read them as normal.
- Fixes three issues #129, #235, #264