异步加载 Vue 组件以减小 chunk 体积
异步加载 Vue 组件以减小 chunk 体积
kifuan
发布于 2022-11-14 16:28:36
发布于 2022-11-14 16:28:36
问题
当你的组件过于复杂时，这里指它引用了非常多的第三方库，那么当你打包的时候或许会碰到下面的警告：
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.当然一个最简单的方法，就是按照它提示的最后一行，编辑 vite.config.ts：
export default defineConfig({
// ...
build: {
chunkSizeWarningLimit: 1500,
},
})但是，既然我写了这篇文章，就证明我没有直接忽略这个警告。警告竟然得到了尊重，泪目了。
方案
对一些比较重的组件，尤其是需要我们从后端获取数据后才显示的组件，用一层 defineAsyncComponent 套起来，如下：
const AsyncFoo = defineAsyncComponent(() => import('./Foo.vue'))之后再模板里直接当成 Foo 组件用就可以了：
<AsyncFoo
:prop1="val1"
:prop2="val2"
/>这是在 Vue 官网上专门介绍的用法，点此前往。
当然，这个不能操之过急，只要拆分几个主要的大组件即可。如果不管三七二十一全都用异步组件，有些地方加载的时候就会直接留白，导致很难看。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录