React应用Lighthouse性能评分偏低：未使用JS问题及优化咨询

针对你遇到的未使用JS（尤其是node_modules中的冗余代码、注释）拖垮Lighthouse性能的问题，给你几个实用的解决方向：

1. 优化Tree Shaking，精准剔除未使用代码 #

Tree Shaking是现代打包工具（Webpack、Vite）剔除未引用代码的核心能力，确保它正常工作：

• 确保项目打包模式设为production：生产模式下打包工具会自动开启Tree Shaking和代码压缩
• 给依赖库标记sideEffects：在项目的package.json里添加"sideEffects": false（如果确定没有副作用代码），或者列出有副作用的文件（比如CSS），让打包工具放心剔除未引用的模块
• 避免CommonJS模块：尽量使用ES模块（import/export）而非CommonJS（require），因为Tree Shaking对ES模块支持更好

2. 移除node_modules中的冗余注释 #

打包时配置压缩工具自动移除所有注释：

• 用Webpack的话，配置terser-webpack-plugin，开启compress.drop_comments: true和format.comments: false
• 用Vite的话，它默认在生产模式下会移除注释，若需自定义可在vite.config.js的build.minify选项里调整terserOptions

3. 代码分割与按需加载 #

把非首屏必需的代码拆分出来，延迟加载：

• 用动态import()语法拆分路由组件：比如const About = () => import('./About')，让路由组件只在访问时加载
• 拆分第三方依赖：通过Webpack的splitChunks配置，把常用的第三方库（比如React、Vue）单独打包成一个chunk，利用浏览器缓存
• 按需引入UI组件：不要全量引入UI库（比如import 'antd'），而是只引入用到的组件（import Button from 'antd/es/button'），配合babel插件（比如babel-plugin-import）自动处理样式和代码

4. 分析并替换冗余依赖 #

用打包分析工具定位体积大的依赖，看看有没有更轻量的替代方案：

• 用webpack-bundle-analyzer（Webpack）或rollup-plugin-visualizer（Vite）生成包体积分析图，找出占比高的未充分利用的依赖
• 比如用date-fns替代moment.js，用lodash-es替代全量lodash（并且按需引入单个方法）

5. 预加载关键资源，延迟非关键JS #

• 对首屏必需的JS资源添加<link rel="preload">，让浏览器优先加载
• 对非首屏的JS，用defer或async属性加载，或者通过Intersection Observer监听元素出现时再动态加载对应的代码

6. 清理遗留的死代码 #

• 用Chrome DevTools的Coverage面板（你已经在使用）定位项目自身的未使用代码，手动删除
• 配合ESLint的no-unused-vars规则，在开发阶段就避免产生未使用的变量和函数

最后，每次调整后重新运行Lighthouse审计和Coverage分析，验证优化效果，逐步迭代。

内容的提问来源于stack exchange，提问作者Devyani Jangde