uniapp echarts 错误的打包到主包中导致vendor.js 包过大如何优化？

在使用uniapp开发时，发现echarts被错误地打包到了主包中，导致vendor.js体积过大，影响页面加载性能。请问如何优化配置，确保echarts能按需加载或分包处理？目前尝试过修改manifest.json的配置，但效果不明显。

2 回复

将echarts按需引入，使用echarts的按需引入功能，只引入需要的图表组件。或者使用分包策略，将echarts单独打包到分包中，减少主包体积。


在 UniApp 中使用 ECharts 时，如果 ECharts 被错误打包到主包（vendor.js），导致包体积过大，可以通过以下方法优化：

1. 使用 ECharts 官方精简版或按需引入

  • 推荐方案：使用 echarts/core 和所需组件按需引入，而不是完整版 ECharts。
  • 示例代码（在 Vue 组件中）：
    import * as echarts from 'echarts/core';
import { LineChart, BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([LineChart, BarChart, TitleComponent, TooltipComponent, GridComponent, CanvasRenderer]);

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chartDom);
    chart.setOption({ /* 配置项 */ });
  }
};
  • 效果：显著减小 ECharts 体积（从 700KB+ 降至 100KB 左右）。

2. 配置分包策略

  • 在 pages.json 中，将使用 ECharts 的页面设置为分包，避免 ECharts 被打入主包。
  • 示例配置：
    {
  "subPackages": [
    {
      "root": "subpages",
      "pages": [
        { "path": "chartPage", "style": { /* 页面样式 */ } }
      ]
    }
  ]
}
  • 注意：确保 ECharts 仅在分包页面中引入。

3. 使用 HBuilderX 的优化配置

  • 在 manifest.json 中启用 "optimization" 选项：
    {
  "webpack": {
    "optimization": {
      "splitChunks": {
        "chunks": "all"
      }
    }
  }
}
  • 这有助于 Webpack 自动拆分公共依赖。

4. 检查并移除未使用的 ECharts 组件

  • 通过构建分析工具（如 Webpack Bundle Analyzer）检查打包结果，确认 ECharts 是否被正确拆分。
  • 移除未使用的图表类型或组件。

5. 使用 CDN 引入（不推荐，但可选）

  • 在 index.html 中通过 <script> 标签引入 ECharts，但可能影响 UniApp 的跨端兼容性。

总结

优先采用 按需引入 和 分包策略，结合构建优化，可有效减少 vendor.js 体积。如果问题持续，检查项目依赖和配置，确保 ECharts 未在主包中重复引入。

回到顶部