Lighthouse 建议移除未使用的 JavaScript，但我的 Vue 组件是动态加载的怎么办？

程序员统赫提问于 2026-03-27 10:23:21 阅读 21

工具

我在跑 Lighthouse 时总被提示“移除未使用的 JavaScript”，但我用的是 Vue 的异步组件，按路由懒加载的，这些代码其实不是首屏用不到吗？为啥还被算作“未使用”？

比如下面这个写法，应该没问题吧？

<script>
const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];
</script>

是不是 Lighthouse 识别不了动态 import？那我该怎么优化才能过这一项？

我来解答赞 2 收藏

反馈

1 条解答

迷人的培培 Lv1

Lighthouse确实有时候会误判动态加载的组件，但它也不是完全不懂异步加载。你遇到的问题我也踩过坑。

首先你的写法是没问题的，Vue的路由懒加载确实是按需加载组件的。但Lighthouse检测时可能还没等到异步组件真正按需加载完就做了判断，所以报了这个提示。

想解决这个问题可以从两方面着手。一方面是在路由配置上加个 webpackChunkName 来优化打包文件名，让Lighthouse能更好地识别：



const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');

const About = () => import(/* webpackChunkName: "about" */ './views/About.vue');

另一方面就是尽量把首屏不需要的库和插件推迟加载。比如有些全局样式或者工具函数如果不是首屏必需的，可以单独打包成一个异步模块，在需要用的时候再加载。

别走弯路去刻意追求Lighthouse的分数，它只是个参考工具。关键是实际体验要好，页面加载速度要快。我以前为了追求高分改来改去，结果发现用户体验反而变差了。记住，最终目的是提升用户感知的速度，而不是单纯迎合工具的评分规则。

2026-03-27 10:28