入口点大小限制：代码拆分以限制 vue cli 3.x 中入口点的大小

Posted 2023-02-22

【中文标题】入口点大小限制：代码拆分以限制 vue cli 3.x 中入口点的大小

【英文标题】：entrypoint size limit: code splitting to limit the size of entrypoints in vue cli 3.x

【发布时间】：2019-12-09 08:44:36

【问题描述】：

在使用 vue cli 3 构建我的项目后，我得到以下 warning：

经过一番查找，我发现不需要创建webpack.config.js，因为它写成here（或here）：

初始项目不需要文件存在，因为您刚刚使用不需要任何配置的全新“默认”设置创建了一个项目。

Vue CLI documentation 提供了一个可选的vue.config.js，如果它存在于项目根目录中，它将自动加载。似乎也可以在 vue.config.js 中使用 webpack，例如 this。

我对 webpack 完全陌生，无法弄清楚如何使用上面warning 消息中提供的代码拆分来限制我的入口点的大小。有人可以告诉我如何使用vue.config.js 文件解决这个问题吗？

【参考方案1】：

尝试加载您的组件asynchronously。

也更喜欢本地组件注册而不是全局。

【讨论】：

感谢您的建议！我在app.vue:'mk-footer': () => import(/* webpackChunkName: "navFooter" */ './components/Footer.vue') ... 中执行了以下操作，并将我的入口点减少到 274Kib。还有什么可以进一步改善入口点的大小吗？我尝试过延迟加载路线，但没有奏效......