Parcel构建与本地运行差异：生产环境Chart未定义问题咨询

你的问题核心原因是Parcel生产构建时的激进树摇（Tree Shaking）优化，误将Chart.js的代码判定为“未使用”并剔除。开发环境和生产环境的差异在于：开发模式下Parcel为了调试便捷，不会做严格的代码剔除；而生产模式会最大化压缩优化，恰好你把Chart的引用放在了async函数内部，被误判为无实际使用场景。

下面是具体解决办法：

方案1：提前注册插件，避免被树摇 #

把Chart的插件注册逻辑移到async函数外部，让Parcel明确识别到Chart变量被使用：

import { Chart } from 'chart.js/auto';
import annotationPlugin from 'chartjs-plugin-annotation';

// 将注册逻辑移出async函数
Chart.register(annotationPlugin);

(async function() {
    // 后续图表初始化逻辑
    ...
})();

方案2：改用手动导入模式，增强可控性 #

放弃chart.js/auto的自动导入，手动引入核心模块和需要的组件，避免Parcel误删代码：

// 导入Chart核心
import Chart from 'chart.js';
// 手动引入需要的图表组件（示例为折线图必备组件）
import { LineController, LineElement, PointElement } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';

// 注册所有必要组件与插件
Chart.register(LineController, LineElement, PointElement, annotationPlugin);

(async function() {
    ...
})();

方案3：配置Parcel保留Chart.js相关代码 #

在项目根目录的package.json中添加sideEffects字段，告知Parcel这些文件存在副作用，不可被树摇移除：

{
  "sideEffects": [
    "node_modules/chart.js/**/*.js",
    "node_modules/chartjs-plugin-annotation/**/*.js"
  ]
}

以上三种方法任选其一即可解决问题，优先推荐方案1或2，更符合代码优化的原则。

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