有没有办法在 webpack 中拆分节点模块包文件？

【问题标题】：Is there a way to split node module bundle file in webpack?有没有办法在 webpack 中拆分节点模块包文件？
【发布时间】：2021-11-01 20:22:11
【问题描述】：

我为 House Plan 构建了一个 Vuejs 应用程序。我已经使用了一些优化方式，但是我有两个节点模块，其大小远达 20kb，并且我在谷歌上使用 lighthouse 进行的性能测试得分很差。这里是以下模块：

 dist\js\npm.bootstrap-vue.9bf0056f.js                228.65 KiB
 dist\js\npm.vue-tel-input.4440bc34.js                181.81 KiB

请问有办法拆分吗？

【问题讨论】：

【解决方案1】：

我最初开始将此答案写为“使用异步组件”，但我发现您对大型库（分别为 bootstrap-vue 和 vue-tel-input）存在问题，而不是例如。 Vue 路由器视图

您确定要导入例如。以有效的方式引导 Vue 组件？也许您可以避免导入 BootstrapVue 的内容而只使用您需要的某些部分？ https://bootstrap-vue.org/docs#tree-shaking-with-module-bundlers

至于vue-tel-input，你用的是版本5吗？好像更轻了所以希望它会帮助你，因为你不能真正拆分别人的图书馆，除非你分叉它

【讨论】：