Loading times of vue3-sfc-loader vs. http-vue-loader -- lightweight version possible? #50
-
|
Hello, first of all, thank you for creating vue3-sfc-loader and http-vue-loader! Also, I am quite new to Vue.js and only have a limited understanding of how vue3-sfc-loader works, so please point out if I am making wrong assumptions somewhere. I am currently investigating if it makes sense to rely on vue3-sfc-loader for building a setup to create fast prototypes/demo apps with Vue 3. That means I do not care much about supporting older browsers and not needing a build step would be very nice. It is quite noticeable, however, that vue3-sfc-loader is considerably larger and slower than http-vue-loader. This especially gets worse when the amount of code loaded increases. I did some quick-and-dirty profiling with
I would assume that this extra overhead mostly comes from transpiling the code with Babel. With the compiledCache, it seems to be possible to reduce the extra overhead for subsequent page loads. However, I do not care about browser support and what http-vue-loader does is good enough for my purposes. Is there a way to skip transpiling and get loading speeds that are comparable to http-vue-loader? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
Hi, I agree that The big difference between http-vue-loader and vue3-sfc-loader, it the use of
On the Note that Here are the points on which I can act to make things faster :
What i can't do :
Here are the points on which I can act to make things smaller :
|
Beta Was this translation helpful? Give feedback.
-
|
Thank your for your detailed explanations! If I understand that correctly, there might indeed be some potential for a lightweight version that does not care about browser support. In my envisioned scenario, I would have a minimum index.html that loads App.vue via vue3-sfc-loader and then the rest of the code can use regular imports (and could also be built with regular build tools). What is not clear to me: Is there any potential to significantly reduce the CPU load for If I add a import './babylon.max.js'to the SFC script of my minimum example, I get around 17 seconds of loading time while doing the same in a In any case, I unfortunately lack the experience necessary (and currently the time) to try to improve the situation myself. I appreciate your explanations and will keep an eye on the development. :) |
Beta Was this translation helpful? Give feedback.
-
|
AFAIK regular imports will not be possible with code managed by http-vue-loader (however, I will look further). a) javascript code in SFCs b) other imported javascript modules? BTW, babylon.max.js 11.4 MB ! |
Beta Was this translation helpful? Give feedback.
-
|
see #70 |
Beta Was this translation helpful? Give feedback.
-
|
Example with const config = {
files: {
'/main.vue': /* <!-- */`
<template>
<div>Ok</div>
</template>
<script>
import three from './three.js'
</script>
`/* --> */,
}
};
const { createCJSModule, loadModule } = window['vue3-sfc-loader'];
const options = {
moduleCache: {
'vue': Vue,
},
async handleModule(type, getContentData, path, options) {
if ( path.toString().endsWith('/three.js') )
return createCJSModule(type, await getContentData(false), options);
return undefined;
},
async getFile(url, options) {
if ( config.files[url] )
return config.files[url];
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(res.statusText + ' ' + url), { res });
return {
getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
}
throw new Error('404 ' + url);
},
addStyle() { /* unused here */ },
}
Vue.createApp(Vue.defineAsyncComponent(() => loadModule('/main.vue', options))).mount(document.body); |
Beta Was this translation helpful? Give feedback.
Hi,
I agree that
vue3-sfc-loaderis mush slower (and much bigger) thathttp-vue-loader.I do my best to reduce the bundle size (but there will certainly be a limit) and to keep it fast.
The big difference between http-vue-loader and vue3-sfc-loader, it the use of
@vue/compiler-sfc(and@vue/component-compiler-utilsfor vue2) which gives much more robust results.@babel&postcssare certainly the most CPU consuming 3rd party libs in the process. Unfortunately they are required by@vue/compiler-sfcfor good reasons (static analysis, css modifications for scope/modules support, ...)On the
vue3-sfc-loaderside, babel is used to transpile esm to cjs, statically detect modules dependencies an…