Implement Code Splitting ⚡️

[goenning]

We currently bundle every JavaScript and CSS into their own single bundle. We have a vendor bundle because third party packages change way less often than our own code, so that's a problem solved.

The problem we have now is that a small change on a specific component results into a completely new bundle which has to be downloaded by all users.

We should really look into Code Splitting and how that can help us push smaller javascript files to users. We could also think about using optimization.splitChunks.

My idea is to split based on our Page Components that are described on router.tsx. Every Page Components would result into a separate bundle that is downloaded only when necessary.

Tasks:

• Split JavaScript by Routes (PR: Feature: Add Code Splitting #596)
• Fix CSS Warnings (PR: Add Webpack Chunk Names and Fix CSS Warnings #619)
  • Reminder 1: we have multiple import "./TagForm.scss". This css file should only be imported by TagForm. This was probably a copy-paste mistake.
  • Reminder 2: npx webpack -p --profile --json > compilation-stats.json generates a very useful internal view of modules. This might help us resolve this issue.
• enable esModuleInterop and fix everything that breaks after that. Jest tests should be warning-free after this. (PR Esinterop enable #600)
• Move common components (public/components/common) to its own JS and CSS bundle. These components don't change that often, thus avoiding users having to download this over and over again. feature: add a common chunk #636
• Webpack allows us to give name to chunks, like import(/* webpackChunkName: "ShowPost.page" */ "@fider/pages/ShowPost/ShowPost.page");. We can use this to preload this chunk as shown here: https://developers.google.com/web/updates/2016/03/link-rel-preload (PR: Add Webpack Chunk Names and Fix CSS Warnings #619)
• Replace React-Loadable with React.lazy. (PR: tooling: replace react-loadable with react lazy #646)

Resources:

• https://webpack.js.org/guides/code-splitting/
• https://reactjs.org/docs/code-splitting.html
• https://webpack.js.org/plugins/split-chunks-plugin/

[cfilby]

I'll look into this one