vendredi 19 juillet 2019

How to split code into several bundles with Vue CLI3

I have a Vue project using TypeScript and built by Vue-CLI3.

What I'm trying to achieve is to get Webpack to build separate bundles for my workers. I've read about Webpack Code Splitting and about configureWebpack in vue.config.js, but so far had no luck in putting them together.

The project setup is the standard vue create type. I have a ./src/main.ts as the main entry point and a bunch of TypeScript modules, I want as separate bundles with their own dependency trees (I'm fine with code duplication if it can't be avoided).

I'd like to get

./dist/js/all main stuff
./dist/js/workers/worker1.6e3ebec8.js
./dist/js/workers/worker2.712f2df5.js
./dist/js/workers/worker3.83041b4b.js

So I could do new Worker(worker1.6e3ebec8.js) in the main code.

I could launch workers from the main package by generating javascript code, putting it into a blob and instantiating from that, but it looks rather awkward. Besides, my worker code import other modules, so it doesn't seem to be an option anyway.

I'm quite new to all of this, so maybe I'm not even heading in the right direction.

What is the usual way of doing that on this stack?




Aucun commentaire:

Enregistrer un commentaire