0

I have a react app that I initiated with vite. I wanted to host the app on azure static web apps but apparently I'm exceeding the size limit which is 524288000 bytes.

The biggest contributors seem to be duckdb-wasm and fluentui so I'd like to not bundle those and just have the client get those from their respective CDNs.

Is that doable and if so, how would I do it?

For instance I have in my 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';

How would I replace those? Further, assuming it isn't the same answer, how do I tell the configuration to ignore them?

Edit: this turned out to be a big XY problem. I'll include my details in case it helps anyone else

The issue was that in my yml file I needed to have output_location point to ./dist since that's where vite build puts everything by default. Without that the azure or github action (not sure which) kept all the node_modules which were, of course, too big. With the output_location properly set it deployed just fine.

Dean MacGregor
  • 11,847
  • 9
  • 34
  • 72
  • Does this answers your question https://stackoverflow.com/questions/44877904/how-do-you-import-a-javascript-package-from-a-cdn-script-tag-in-react? – radovix Aug 08 '23 at 18:32

1 Answers1

0

To load libraries from CDNs instead of bundling them in a Vite project:

  1. Add CDN Links in index.html:
<script src="CDN_LINK_FOR_DUCKDB"></script>
<script src="CDN_LINK_FOR_FLUENTUI"></script>
  1. Update Vite's Configuration (vite.config.js):
export default {
  build: {
    rollupOptions: {
      external: ['@duckdb/duckdb-wasm', '@fluentui/react'],
    },
  },
  optimizeDeps: {
    exclude: ['@duckdb/duckdb-wasm', '@fluentui/react']
  }
}
  1. Reference Global Variables in Your Code:
const DefaultButton = GLOBAL_VAR_FOR_FLUENTUI.DefaultButton;

Replace CDN_LINK_FOR_DUCKDB, CDN_LINK_FOR_FLUENTUI, and GLOBAL_VAR_FOR_FLUENTUI with the appropriate values.

Daredevil
  • 732
  • 5
  • 13