fix(build): vendor chunk strategy uses static imports, fix #2672

[fi3ework]

…2672)

Description

Fixes #2672.

Vite put module which is in node_modules and not imported by any dynamic import recursively to the vendor chunk. But in #2672, node_modules/prismjs/components/prism-json.js is used in the initial chunk and also imported by dynamic import. So a runtime error threw when it used in the initial chunk.

Maybe we should put modules which in node_modules and statically imported by any entry module recursively to the vendor chunk.

The diff of modules moved to chunk vendor (✅ - moved, ❌ - not moved)

before:

❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/index.html
❌ vite/dynamic-import-polyfill
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/main.ts
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/prismjs/prism.js
✅ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/prismjs/components/prism-json.js
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/prismjs/themes/prism.css
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vue/dist/vue.runtime.esm.js
✅ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vue-router/dist/vue-router.esm.js
✅ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vuetify/dist/vuetify.js
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vuetify/dist/vuetify.min.css
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/App.vue
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/MyView.vue
❌ vite/preload-helper
❌ commonjsHelpers.js
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/MyView.vue?vue&type=script&lang.ts
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/MyView.vue?vue&type=template&lang.js
❌ /vite/vueComponentNormalizer
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/App.vue?vue&type=script&lang.ts
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/App.vue?vue&type=template&lang.js
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/App.vue?vue&type=style&index=0&lang.css
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vue-prism-component/dist/vue-prism-component.common.js
✅ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vue/dist/vue.runtime.esm.js?commonjs-proxy
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/prismjs/prism.js?commonjs-proxy

after:

❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/index.html
❌ vite/dynamic-import-polyfill
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/main.ts
✅ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/prismjs/prism.js
✅ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/prismjs/components/prism-json.js
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/prismjs/themes/prism.css
✅ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vue/dist/vue.runtime.esm.js
✅ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vue-router/dist/vue-router.esm.js
✅ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vuetify/dist/vuetify.js
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vuetify/dist/vuetify.min.css
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/App.vue
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/MyView.vue
❌ vite/preload-helper
❌ commonjsHelpers.js
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/App.vue?vue&type=script&lang.ts
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/App.vue?vue&type=template&lang.js
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/App.vue?vue&type=style&index=0&lang.css
❌ /vite/vueComponentNormalizer
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/MyView.vue?vue&type=script&lang.ts
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/src/MyView.vue?vue&type=template&lang.js
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vue-prism-component/dist/vue-prism-component.common.js
❌ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/prismjs/prism.js?commonjs-proxy
✅ /Users/fi3ework/Downloads/vite-repro-prism-is-not-defined-master/node_modules/vue/dist/vue.runtime.esm.js?commonjs-proxy

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[Shinigami92]

I can confirm that my production project works with this fix and run super smoothly 🎉

Tested with yarn link "vite"

[Shinigami92]

@fi3ework Could you update / rebase onto the latest main?
This will bring in all the new test workflows 🙂

[fi3ework]

@Shinigami92 hi, I just rebased the branch and all tests flow passed except Appveyor. Seems like the queue blocked. Can we remove Appveyor in the future? It runs really slow. 😅

[Shinigami92]

Yeah, in some weeks we potentially will remove AppVeyor and CircleCI

[patak-dev]

Thanks a lot for this PR @fi3ework, this is an important fix