How can I simply convert to single view component into a .js the browser can read?

So I can’t webpack everything into a single file is the issue. The site is so large with so many pieces the script would be massive. Instead it’s broken up into like a main vue script, with the child widgets loaded on demand… but I really HATE dealing with string templates in .js files, the syntax and features in the .vue files are just too hard to ignore.

Am I out of luck here, I can’t find anything on this use-case…

…but that’s pretty much what webpack can automate for you via lazy loading/code splitting? Usually people say that their site is too massive to not use webpack …

If you were talking about a library that you want to keep small and enable consumers to pick and choose individual components, either write a script that runs each vue file through rollupjs and rollup-plugin-vue, and/or just export the .vue files plain as they are so webpack users can consume them “raw”

Hey I’m all open to any way to get this working so I can use SVCs! But combined it’s like a 3 meg script file I’d rather like to keep it more lean than that if possible. It’s not so much like vendor libraries just general site code. There’s just a lot of “tools”…

It’s broken up like:

(Core stuff, menus, navs… things on every page)
/scripts/core.js

(repeat this a hundred times with various widgets)
/widgets//resources/component.js

The initial resulting webpack test was 3.5 megs

I had no idea rollup was a thing, tried browserify\webpack but it seemed all the browserify tooling was depreciated in favour of webpack.

Well, did you use lazy loading / async components when working with webpack?

https://router.vuejs.org/guide/advanced/lazy-loading.html

This is something you can add very quickly and wihtout any webpack configuration. Webpack will then strip out code for these lazy loaded components from the initial bundle and load them on demand only.

That’s one of the most important webpack features to understand and use. It not only works with Vue components by the way, Vue just incorporates it nicely:

1 Like