You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've been playing with vite-ssg for a few days to include i18n router with a single codebase and I have found some improvements that can be applied here on vite.
While playing with this awesome plugin from @antfu , I help @patak-js to include the PWA on layoutit-grid, applying some hints to improve page speed, using what I use for vite-ssg.
Let me explain using layoutit-grid repo as example:
This repo is a single page app, that is, it has only one page, and so, only one real main entry point.
The client manifest generated by vite is something this (configuring build.manifest: true).
Since the application only has a single page, we can preload all its dependencies to avoid extra round trips to the server, since all dynamic imports will have its own asset: for example, lighthouse will complain about not preloading those assets.
vite doesn't know the application has only one page, and so, only main entry point deps will be added to the index.html page (excluding all dynamic imports to be preloaded). Following with the example, index.html will only have assets/index.b79d3e9a.js, assets/index.bc718dfb.cssand _vendor.daf64f6e.js:
since this entry is for browser hint. I use a lot http2 and I remove all link with modulepreload since I use http2 server push or when no http2 can be used, I use link header to hint the browser what modules will be used (will hint the browser before start parsing the html). In fact, vite 1 do this optimization, and later vite 2 remove it.
So the index.html should be this (the module should be on browser hints):
Next step, is to include dynamic imports to the index.html, since we'll use them immediatly (once page is loaded), remember that vite cannot read your mind, the result should be:
About dynamic imports, vite cannot do anymore for you, you will need to add your own plugin using transformIndexHtml with apply: 'build' and enforce: 'post', then traverse dynamic imports from bundle and add those dynamic imports to index.html (you can see an example on vite.config.ts on layoutit-grid repo).
When your spa has more than 1 page/route, this approach will not work, since the index.html is used for all your pages and you wan't to preload all assets.
The first problem with vite comes when trying to do the same but with css and assets, since transformIndexHtml will not expose neither of them.
Following with the example, you will understand what I mean.
the app has a logo
the app will include webmanifest.manifest entry (remember I was adding PWA to the app)
I need to add the hint for those 2 guys to the index.html and so hint the browser to preload them, in that case, this preload is done using a link with rel="prefecth":
<head><linkrel="prefetch" href="/img/icons/icon-44x44.png" /><linkrel="prefetch" href="/manifest.webmanifest" />
...
<linkrel="manifest" href="/manifest.webmanifest"></head><!-- THIS GUY WILL BE ADDED BY PWA PLUGIN -->
The first improvement we propose to be include on vite is to add a way to access css and assets on transform context argument, maybe a callback, maybe on the bundle in context, and so if anyone using it, can access to them.
Following with layoutit-grid repo example, I change the css entry with one non blocking, intead having this:
And here is the second improvement, add another nonblocking param for css to the assets plugin to do previous optimization (maybe also an improvement for vue SFC style). I need to review if this enhacement with CSP has some drawbacks. The usage will be something like this:
// main.tsimport('/main.css?nonblocking')
The third improvement we propose to be included on vite is to add the prefetchparam to assets plugin and so all assets with this new param will be added as a prefecth link to the index.html page. This will also work when your spa has more than 1 page (for example, a logo img on a header component in the layout):
Of course, this can be done directly on the index.html and moving the image to the public directory, but for ppl using it from assets will be an improvement.
Finally, the last entry on this discussion is about mpa, I'm not sure if already done on vite. We need to switch to vite-ssg repo and i18n router with SSG, let me explain:
Right now, vite-ssg is not working 100% correctly, it generates the pages and all stuff, but it has a problem related to page speed, since it will not include dynamic imports nor assets nor css from its dependencies. For example, using the src/pages/b.vue page, we can see that SSG only generates its corresponding html file, and so adding only deps from main entry point. But now, we have the page for this route, it is not shared for all routes, and so we can safely traverse all its own dynamic imports (and recursively for each entry its own imports, css and assets), css and assets.
The client manifest generated by vite is something this (configuring build.manifest: true on SSR build).
So, we can improve vite: we can detect mpa and then apply optimizations for each entry. I don't know if it is already done (I haven't tested mpa), if not, if it can be done and how much can it cost.
If you have reached this point and you have not died trying, thank you for reading my ideas.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I've been playing with
vite-ssgfor a few days to includei18nrouter with a single codebase and I have found some improvements that can be applied here onvite.While playing with this awesome plugin from @antfu , I help @patak-js to include the PWA on layoutit-grid, applying some hints to improve page speed, using what I use for
vite-ssg.Let me explain using
layoutit-gridrepo as example:This repo is a single page app, that is, it has only one page, and so, only one real main entry point.
The client manifest generated by vite is something this (configuring build.manifest: true).
{ "index.html": { "file": "assets/index.b79d3e9a.js", "src": "index.html", "isEntry": true, "imports": [ "_vendor.daf64f6e.js" ], "dynamicImports": [ "_lz-string.99cf9835.js", "_pep.1846cc10.js" ], "css": [ "assets/index.bc718dfb.css" ] }, "_vendor.daf64f6e.js": { "file": "assets/vendor.daf64f6e.js" }, "_pep.1846cc10.js": { "file": "assets/pep.1846cc10.js", "isDynamicEntry": true }, "_lz-string.99cf9835.js": { "file": "assets/lz-string.99cf9835.js", "isDynamicEntry": true } }Since the application only has a single page, we can preload all its dependencies to avoid extra round trips to the server, since all
dynamic importswill have its own asset: for example,lighthousewill complain about not preloading those assets.vitedoesn't know the application has only one page, and so, only main entry point deps will be added to theindex.htmlpage (excluding alldynamic importsto be preloaded). Following with the example,index.htmlwill only haveassets/index.b79d3e9a.js,assets/index.bc718dfb.cssand_vendor.daf64f6e.js:This is not 100% optimal, it also needs this line:
since this entry is for browser hint. I use a lot
http2and I remove alllinkwithmodulepreloadsince I usehttp2 server pushor when nohttp2can be used, I uselinkheader to hint the browser what modules will be used (will hint the browser before start parsing the html). In fact,vite 1do this optimization, and latervite 2remove it.So the
index.htmlshould be this (the module should be on browser hints):The equivalent for modulepreload using http link header will be this header when requesting / page.
Next step, is to include
dynamic importsto theindex.html, since we'll use them immediatly (once page is loaded), remember thatvitecannot read your mind, the result should be:About
dynamic imports,vitecannot do anymore for you, you will need to add your own plugin usingtransformIndexHtmlwithapply: 'build'andenforce: 'post', then traversedynamic importsfrombundleand add thosedynamic importstoindex.html(you can see an example onvite.config.tsonlayoutit-gridrepo).When your
spahas more than 1 page/route, this approach will not work, since theindex.htmlis used for all yourpagesand you wan't to preload all assets.The first problem with
vitecomes when trying to do the same but withcssandassets, sincetransformIndexHtmlwill not expose neither of them.Following with the example, you will understand what I mean.
webmanifest.manifestentry (remember I was adding PWA to the app)I need to add the hint for those 2 guys to the
index.htmland so hint the browser to preload them, in that case, this preload is done using a link withrel="prefecth":The first improvement we propose to be include on
viteis to add a way to accesscssandassetsontransformcontext argument, maybe a callback, maybe on thebundlein context, and so if anyone using it, can access to them.Following with
layoutit-gridrepo example, I change thecssentry with one non blocking, intead having this:we want this one:
And here is the second improvement, add another
nonblockingparam forcssto theassetsplugin to do previous optimization (maybe also an improvement forvue SFC style). I need to review if this enhacement withCSPhas some drawbacks. The usage will be something like this:The third improvement we propose to be included on
viteis to add theprefetchparam toassetsplugin and so allassetswith this new param will be added as aprefecth linkto theindex.htmlpage. This will also work when your spa has more than 1 page (for example, a logo img on aheadercomponent in thelayout):with the result:
Of course, this can be done directly on the
index.htmland moving the image to the public directory, but for ppl using it fromassetswill be an improvement.Finally, the last entry on this discussion is about
mpa, I'm not sure if already done onvite. We need to switch tovite-ssgrepo andi18n routerwithSSG, let me explain:Right now,
vite-ssgis not working 100% correctly, it generates the pages and all stuff, but it has a problem related to page speed, since it will not includedynamic importsnorassetsnorcssfrom its dependencies. For example, using thesrc/pages/b.vuepage, we can see thatSSGonly generates its corresponding html file, and so adding only deps from main entry point. But now, we have the page for this route, it is not shared for all routes, and so we can safely traverse all its owndynamic imports(and recursively for each entry its ownimports,cssandassets),cssandassets.The client manifest generated by vite is something this (configuring build.manifest: true on SSR build).
{ "index.html": { "file": "assets/app.0d8781b6.js", "src": "index.html", "isEntry": true, "imports": [ "_vendor.ac044cbc.js" ], "dynamicImports": [ "src/pages/index.md", "src/pages/b.vue", "src/pages/a.md", "src/pages/hi/[name].vue" ], "css": [ "assets/app.ccd406f9.css" ] }, "_vendor.ac044cbc.js": { "file": "assets/vendor.ac044cbc.js" }, "src/pages/index.md": { "file": "assets/index.94eea00f.js", "src": "src/pages/index.md", "isDynamicEntry": true, "imports": [ "_Counter.adaf98b7.js", "_vendor.ac044cbc.js", "index.html" ] }, "_Counter.adaf98b7.js": { "file": "assets/Counter.adaf98b7.js", "imports": [ "index.html", "_vendor.ac044cbc.js" ], "css": [ "assets/Counter.ecd9e063.css" ] }, "src/pages/b.vue": { "file": "assets/b.0d0687be.js", "src": "src/pages/b.vue", "isDynamicEntry": true, "imports": [ "_Counter.adaf98b7.js", "_vendor.ac044cbc.js", "index.html" ], "assets": [ "assets/test.787f7936.jpg" ] }, "src/pages/a.md": { "file": "assets/a.74e2c17a.js", "src": "src/pages/a.md", "isDynamicEntry": true, "imports": [ "_vendor.ac044cbc.js" ] }, "src/pages/hi/[name].vue": { "file": "assets/[name].e8e2b3cd.js", "src": "src/pages/hi/[name].vue", "isDynamicEntry": true, "imports": [ "index.html", "_vendor.ac044cbc.js" ] } }Once analized dependencies for
src/pages/b.vueroute, here's what we need to include on its html page:and so, the result will be something like this:
So, we can improve
vite: we can detectmpaand then apply optimizations for each entry. I don't know if it is already done (I haven't tested mpa), if not, if it can be done and how much can it cost.If you have reached this point and you have not died trying, thank you for reading my ideas.
Regards.
Beta Was this translation helpful? Give feedback.
All reactions