Enhancement/issue 137 lazy load post details

[thescientist13]

Related Issue

resolves #137

Summary of Changes

1. Created a routes.js config file and used dynamic import() to lazy load Post Details page
2. Set <base href="/"> to ensure proper loading of dynamic chunks within nested routes
3. Fixed issue with extraneous CSS chunks showing up

Some concerns around performance as per comments in the issue

[thescientist13]

Observations

So after rebasing to pull in the webpack v4 upgrade work, I am seeing some very interesting results.

Compared to the local results observed in the webpack v4 upgrade PR, it looks like although the I am now seeing an increase of about 6 assets / chunks worth of (JS / CSS)

• the payload size has gone up a little bit, mostly with about an additional 75 KB of CSS (this may be duplicated CSS, given the Lighthouse feedback about unused styles ?)
• network requests have gone up by about 6

BUT!!!! The app scored a 74 in performance locally!!!! 😮

Takeaways

So given the payload size stayed the same, my guess is that webpack is doing its best to strategically chunk based on best practices like keeping chunks small, but still leveraging the browser's ability to download and parse in parallel (i.e. what HTTP/2 is meant to promote).

Should work on trying to look into that CSS but this seems to be a game changer of a PR 🏅

[thescientist13]

Fixed the CSS issue thanks to this comment which now gives a local score of 75!!! 🎉

just now seeing this issue though when trying to load the post details route though

Uncaught SyntaxError: Unexpected token <
index.220f8a217c2b04194a5a.bundle.js:1 Uncaught (in promise) Error: Dynamic page loading failed: Error: Loading chunk 4 failed.
(missing: http://127.0.0.1:8080/post/4.chunk.js)
    at c (index.220f8a217c2b04194a5a.bundle.js:1)

The URL the browser is trying to load, http://127.0.0.1:8080/post/4.chunk.js seems suspect. 🤔