When building Vue app in library mode with vue-cli-service, following command:
vue-cli-service build --target lib
would generate multiple chunks, one per each lazy-loaded component (() => import('@/component.vue')
) in app’s router:
Entrypoints:
foo.umd.min (2.15 MiB)
foo.css
foo.umd.min.js
File Size Gzipped
dist/foo.umd.min.js 2113.97 KiB 550.03 KiB
dist/foo.umd.js 4985.15 KiB 936.28 KiB
dist/foo.common.js 4984.78 KiB 936.19 KiB
dist/foo.common.17.js 1626.31 KiB 171.45 KiB
dist/foo.umd.17.js 1626.31 KiB 171.45 KiB
dist/foo.common.5.js 666.29 KiB 120.67 KiB
(...)
How can I achieve the same in Vite?
When I add to vite.config.js:
build: {
lib: {
entry: resolve(__dirname, 'src/main.ts'),
name: 'FOO',
fileName: 'foo',
formats: ['umd'],
},
},
and run vite build
code splitting doesn’t work, it generates only one umd.js file:
vite v4.5.3 building for production...
transforming...
✓ 1262 modules transformed.
rendering chunks...
computing gzip size...
dist/style.css 235.11 kB │ gzip: 38.69 kB
dist/foo.umd.js 9,526.86 kB │ gzip: 5,492.34 kB
✓ built in 40.03s
When build.lib
is removed it does generate multiple chunks, but with the intent to be used with index.html, which I don’t want. What I want to generate is supposed to be imported by another Vue app:
(Another Vue App)
My App (foo.umd.js)
My App's Chunk 1 (foo.umd.1.js)
My App's Chunk 2 (foo.umd.2.js)
My App's Chunk 3 (foo.umd.3.js)