uniapp分包引用的u-charts被打包到了主包common的vendor.js里是怎么回事？

在UniApp中，u-charts组件被意外打包到主包的vendor.js（位于common目录）中，通常是由于以下原因导致的。这可能会增加主包体积，影响应用加载性能。以下是原因和解决方案：

原因分析

1. 依赖引入方式不当：如果在主包（如pages.json的首页或公共页面）或全局组件中直接引用了u-charts，UniApp的打包机制可能将其识别为公共依赖，从而打包到主包。
2. 代码分割未生效：UniApp默认根据页面路由进行分包，但如果u-charts在多个分包中被引用，且未正确配置，可能被优化到主包。
3. 静态资源路径问题：u-charts的组件或相关文件路径未按分包规范放置，导致打包工具无法正确分割。

解决方案

1. 检查引用位置：

   • 确保u-charts仅在分包页面中引入，避免在主包页面或全局组件（如App.vue）中引用。
   • 例如，在分包页面的.vue文件中局部引入：

     import uCharts from '@/components/u-charts/u-charts.vue'; // 确保路径正确
     export default {
       components: { uCharts }
     }
     

   • 如果使用了easycom自动导入，在pages.json中配置easycom规则，将u-charts限制在分包内：

     {
       "easycom": {
         "autoscan": true,
         "custom": {
           "^u-charts": "@/components/u-charts/u-charts.vue" // 调整路径匹配分包
         }
       }
     }
     

2. 配置分包优化：

   • 在manifest.json中启用代码压缩和优化（HBuilderX默认开启），确保打包工具正确处理依赖。
   • 如果使用CLI，检查vue.config.js（如存在）是否配置了optimization.splitChunks，避免强制合并到主包。

3. 验证文件结构：

   • 将u-charts组件文件放置在分包目录下，例如：

     /subpackage1/components/u-charts/  // 分包专用
     

   • 在主包中移除任何对u-charts的间接引用。

4. 重新构建：

   • 清理项目（删除unpackage/dist文件夹）后重新打包，检查是否解决。

如果问题持续，检查UniApp版本和u-charts插件兼容性，或尝试简化代码测试。通常，通过上述调整可避免u-charts被打包到主包。