We are using Vue with Sitecore JSS and trying to do code splitting following the example for React (https://kamsar.net/index.php/2018/08/Code-splitting-with-Sitecore-JSS-React/) to improve our initial loading performance.

We are able to use dynamic import to code split every components into its own chunk but found that every single async component chunks in our app got prefetched by default even though it is not used on that screen because of Vue CLI. We fixed this by adding below code in vue.config.js to turn of prefetch


So now only required components get loaded but we want to make sure these components get preloaded. We try to generate clientManifest by using VueSSRClientPlugin as specified in vue-server-renderer doc (https://ssr.vuejs.org/guide/build-config.html) and provide it as an option as to our renderer like below

import clientManifest from '../dist/vue-ssr-client-manifest.json';
const renderer = createRenderer({ clientManifest });

But we still don't see any async components chunk get preloaded. Anyone has experience implement preloading async components in Vue? Any suggestion would be highly appreciate.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.