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
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.
- more freedom in writing markdown posts by making Vue files instead of json files.
- more benifits on those pages from nuxt, like pre-loading the js files once I get access to the links