Lazy Loading on this site

Situation: More routes and large size of each routes

I changed the site a bit by not injecting json into static directly and generating vue files for each page (I can have more freedom in writing things because the generated html code will not be used as injected codes either. They'll be fit in the slot of the component directly.)

After trying generating the pages, I found out that each route js files r large......

       pages/terminal/2020/10/15/angular-golang-my-first-competition-experience-with-the-combo/index.js   73.7 KiB     109  [emitted]  pages/terminal/2020/10/15/angular-golang-my-first-competition-experience-with-the-combo/index
                                      pages/terminal/2021/09/07/tangoed-with-rtcpeerconnection/index.js     50 KiB     110  [emitted]  pages/terminal/2021/09/07/tangoed-with-rtcpeerconnection/index
                                                                                pages/terminal/index.js   19.7 KiB     111  [emitted]  pages/terminal/index
                                                                                              server.js    122 KiB       0  [emitted]  app
                                                                                   server.manifest.json   20.9 KiB          [emitted]  
 + 191 hidden assets
Entrypoint app = server.js server.js.map

Take pages/terminal/2020/10/15/angular-golang-my-first-competition-experience-with-the-combo/index.js for example. Previously I used a route relying on param, so the post routes can share the component file with their route component. The extra size is its own json, which is only 20.6 KiB, much smaller than this giant webpack bundle.

Solution: Lazy Loading

I guess I'll need to lazy load their mutual codes. So here lazy loading is necessary. Webpack doc explains this and it's pretty simple.

The import implemented like the following code can do the trick.

const mod = () => import('mod')

I converted every imports into this format and tried again, now much better:

       pages/terminal/2020/10/15/angular-golang-my-first-competition-experience-with-the-combo/index.js  33.3 KiB     115  [emitted]  pages/terminal/2020/10/15/angular-golang-my-first-competition-experience-with-the-combo/index
                                      pages/terminal/2021/09/07/tangoed-with-rtcpeerconnection/index.js  9.63 KiB     116  [emitted]  pages/terminal/2021/09/07/tangoed-with-rtcpeerconnection/index
                                                                                pages/terminal/index.js  11.2 KiB     117  [emitted]  pages/terminal/index
                                                                                              server.js   115 KiB       7  [emitted]  app
                                                                                   server.manifest.json  17.4 KiB          [emitted]  
 + 124 hidden assets
Entrypoint app = server.js server.js.map

Though 33.3KB js is still worse than the original 20.6KB json, it's worth it because I could now use my Components in my posts if I want.

I'll have:

  1. more freedom in writing markdown posts by making Vue files instead of json files.
  2. more benifits on those pages from nuxt, like pre-loading the js files once I get access to the links