reproduction (monorepo)
require npm 7 or whatever support workspaces
$ git clone https://github.com/germsb/vite-tree-shaking-test.git
$ cd vite-tree-shaking-test
$ npm install
$ cd vite-app
$ npm run build
open stats.html in your browser
$ google-chrome ./dist/stats.htmlvite-lib package export
-
4 vue components:
SimpleCompSimpleComp2MyButton
import and usemyFunc(src/utils/testFunc.ts)
import and useaddHoursmodule fromdate-fns(npm package).Tooltip
import and usetippy.js(npm package).
-
and one function:
add2Months(src/utils/testExport.ts)
import and useaddMonthsmodule fromdate-fns(npm package).
vite-app package consume vite-lib as dependency in App.vue
- only
SimpleCompis imported.
After build vite-app package, the bundle should only contain vite-lib SimpleComp code.
The bundle contain SimpleComp but also Tooltip component and tippy.js dependency, MyButton component and its dependencies: testFunc.ts file and addHours part of date-fns package. (~35 kb of unused code) See stats.html.
Tree-shake vanilla js work as expected.
With vue SFC it becomes inconsistent, apparently no worries in the case of a simple component, but if it import library or somethinks from other file, the set will be included to the bundle in all cases.