Vite React项目Azure部署体积超标：CDN替代打包及配置修正

问题描述 #

我用Vite初始化了一个React应用，部署到Azure静态Web应用时触发了524288000字节的体积限制。排查后发现duckdb-wasm和FluentUI是体积主要来源，想知道能不能不打包这些依赖，改让客户端从CDN加载？如果可行，具体怎么操作？

我的App.tsx里的导入代码如下：

import * as duckdb from '@duckdb/duckdb-wasm';
import duckdb_wasm_eh from '@duckdb/duckdb-wasm/dist/duckdb-eh.wasm?url';
import eh_worker from '@duckdb/duckdb-wasm/dist/duckdb-browser-eh.worker.js?url';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { Stack, Text, initializeIcons, Pivot, PivotItem, Dropdown} from '@fluentui/react';

需要替换这些导入，另外如果换一种方式，怎么修改构建配置让工具忽略这些依赖？

一、CDN加载依赖的实现方法 #

1. 替换代码中的导入 #

FluentUI配置

先在项目根目录的index.html中引入CDN资源：

<!-- 引入FluentUI样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluentui/react@8/dist/css/fabric.min.css">
<!-- 引入FluentUI核心JS -->
<script src="https://cdn.jsdelivr.net/npm/@fluentui/react@8/dist/fluentui-react.min.js"></script>

然后修改App.tsx中的导入逻辑，改用全局变量（TypeScript需先声明类型）：

// TypeScript类型声明，避免类型报错
declare const fabric: typeof import('@fluentui/react');

// 替换原有导入语句
const { DefaultButton } = fabric.Button;
const { Stack, Text, initializeIcons, Pivot, PivotItem, Dropdown } = fabric;

DuckDB-Wasm配置

同样在index.html中引入CDN资源：

<!-- 引入DuckDB Worker脚本 -->
<script src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.28.1/dist/duckdb-browser-eh.worker.js"></script>
<!-- 引入DuckDB核心JS -->
<script src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.28.1/dist/duckdb-eh.js"></script>

修改App.tsx中的导入：

// TypeScript类型声明
declare const duckdb: typeof import('@duckdb/duckdb-wasm');

// 直接使用CDN地址替换原有的资源导入
const duckdb_wasm_eh = 'https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.28.1/dist/duckdb-eh.wasm';
const eh_worker = 'https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.28.1/dist/duckdb-browser-eh.worker.js';

2. 配置Vite忽略指定依赖 #

在vite.config.ts中添加optimizeDeps.exclude配置，告诉Vite不对这些依赖进行打包：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['@duckdb/duckdb-wasm', '@fluentui/react']
  }
});

二、实际问题的最终解决方案（XY问题补充） #

后来发现这是典型的XY问题，实际根源并非依赖体积过大，而是部署配置错误：

• 在部署使用的GitHub Action YML文件中，需将output_location设置为Vite默认的构建产物目录./dist。
• 未设置该参数时，Azure或GitHub Action会错误上传整个项目目录（包含node_modules），导致部署包体积超限。修正配置后，部署即可顺利完成。

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