如何删除已打包框架内的无用组件

第一步：定位组件注册/引入位置 #

• 先找框架全局依赖注册文件：常见的命名为main.js/main.ts/app.js/bootstrap.js，搜索无用组件的引入代码，格式一般为import 组件名 from '组件包名'、Vue.use(组件名)（Vue生态）或者app.component(组件名, 组件实例)这类全局注册代码，直接删除对应行即可。
• 如果是页面级局部引入的组件，直接到对应页面的script块中删除引入行和模板内的调用标签即可。

第二步：清理依赖包 #

• 打开项目根目录的依赖声明文件：package.json（Node生态）、pom.xml（Java生态）、go.mod（Go生态），找到对应组件的依赖声明行删除。
• 执行对应包管理工具的清理命令：
  • npm生态执行npm uninstall 组件包名
  • yarn生态执行yarn remove 组件包名
  • pnpm生态执行pnpm remove 组件包名

第三步：验证清理结果 #

• 执行项目启动命令，检查控制台是否有报错、页面功能是否正常运行，确认无关联报错即清理完成。

注意：如果组件存在关联的全局样式/静态资源，需要同步到assets目录或者全局样式文件中删除对应的引入代码，避免打包产生冗余资源。

内容的提问来源于stack exchange，提问作者wenhu an