How to use CDN #6846

PeterlitsZo · 2022-02-10T12:39:08Z

PeterlitsZo
Feb 10, 2022

Hi everyone. I am going to let my react-dom to use CDN because it is too big. But I cannot get a good way to deal with it.

Firstly I try vite-plugin-cdn-import, but it looks do not have commit long time, and do not work for me.

Then I find this document (rollup's output paths), it looks great and I try to set build.rollupOptions.output, but... OMG, nothing happend.

Thanks if you help or not help me 👍

UPDATES:

2026-03-11: Fix the wrong markdown syntax.

Answered by erlangera

Sep 9, 2022

I find two ways to use cdn in vite, wish can help you and others.

If you build esm format output, you can use external and output.paths to include CDN module. Note that the CDN js must be a esm format js. And import ** from 'moduleName' will be replace with import ** from 'CDN_url'
example:

// vite.config.js
  build: {
    rollupOptions: {
      external: ['vue'],
      output: {
        paths: {
          vue: 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        }
      }
    }
  }

If you build 'iife' or 'umd' format output, you can use external and output.globals to include CDN module. Note that the CDN js must export module to a global variable.
example:

<!-- index.html -->
<!…

View full answer

erlangera · 2022-09-09T04:20:25Z

erlangera
Sep 9, 2022

I find two ways to use cdn in vite, wish can help you and others.

If you build esm format output, you can use external and output.paths to include CDN module. Note that the CDN js must be a esm format js. And import ** from 'moduleName' will be replace with import ** from 'CDN_url'
example:

// vite.config.js
  build: {
    rollupOptions: {
      external: ['vue'],
      output: {
        paths: {
          vue: 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        }
      }
    }
  }

If you build 'iife' or 'umd' format output, you can use external and output.globals to include CDN module. Note that the CDN js must export module to a global variable.
example:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App CDN IIFE</title>
    <!-- vite-plugin-html inject -->
    <%- cdnScript %> 
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
  </body>
</html>

// vite.config.js
import { fileURLToPath, URL } from "node:url";

import vue from "@vitejs/plugin-vue";
import { createHtmlPlugin } from "vite-plugin-html";

export default {
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  plugins: [
    vue(),
    createHtmlPlugin({
      inject: {
        data: {
          cdnScript:
            process.env.NODE_ENV === "production"
              ? '<script src="https://unpkg.com/vue@3"></script>'
              : "",
        },
      },
    }),
  ],
  build: {
    rollupOptions: {
      external: ["vue"],
      output: {
        format: "iife",
        globals: {
          vue: "Vue",
        },
      },
    },
  },
};

8 replies

erlangera Oct 24, 2023

https://unpkg.com/pdfjs-dist@3.6.172/build/pdf.min.js is an amd/umd format lib.

!function webpackUniversalModuleDefinition(t, e) {
  "object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define("pdfjs-dist/build/pdf", [], e) : "object" == typeof exports ? exports["pdfjs-dist/build/pdf"] = e() : t["pdfjs-dist/build/pdf"] = t.pdfjsLib = e()
}(globalThis, (()=>(()=>{ ... }))

So you can not use output.paths.
In browsers, it was exprted to global variable pdfjsLib and pdfjs-dist/build/pdf by t["pdfjs-dist/build/pdf"] = t.pdfjsLib = e(). Did you try it?
@Hideman85

Hideman85 Oct 24, 2023

But the issue is the app is bundled in esm then it does not work with globals?

I tried the following config without success:

build: {
  rollupOptions: {
    output: {
      globals: {
        'pdfjs-dist': 'pdfjsLib',
      },
    },
    external: ['pdfjs-dist'],
  },
},

The import isnt really replaced just ignored by external but then not replaced 🤔

import*as Ud from"pdfjs-dist";import{PDFDataRangeTransport as eit}from"pdfjs-dist";

Actually it make sense that this isnt working cause it is not exported as module 🤔

I tried another CDN https://cdn.jsdelivr.net/npm/pdfjs-dist@3.6.172/build/pdf.min.js/+esm that appear to be a true module export but the same ambiguous export error is here.
Do we have an alternative to this?

erlangera Oct 26, 2023

I think the reason is that the module does not export PDFDataRangeTransport. It just export a default export. PDFDataRangeTransport is actually its property.

var pdf_min = pdf_min$1.exports;
export {pdf_min as default};

import * as lib from '....'; const {PDFDataRangeTransport} = lib; you mentioned is correct. ES6 can not deconstruction import, it's named import. import{PDFDataRangeTransport as eit}from"pdfjs-dist"; works maybe it's because Babel is used to convert it.
I think there is no other way except modifying the export or import statement.
@Hideman85

shurintou Mar 10, 2026

I find two ways to use cdn in vite, wish can help you and others.

If you build esm format output, you can use external and output.paths to include CDN module. Note that the CDN js must be a esm format js. And import ** from 'moduleName' will be replace with import ** from 'CDN_url'

example:

// vite.config.js

  build: {

    rollupOptions: {

      external: ['vue'],

      output: {

        paths: {

          vue: 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        }

      }

    }

  }

If you build 'iife' or 'umd' format output, you can use external and output.globals to include CDN module. Note that the CDN js must export module to a global variable.

example:

<!-- index.html -->

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <link rel="icon" href="/favicon.ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Vite App CDN IIFE</title>

    <!-- vite-plugin-html inject -->

    <%- cdnScript %> 

  </head>

  <body>

    <div id="app"></div>

    <script type="module" src="./src/main.js"></script>

  </body>

</html>

// vite.config.js

import { fileURLToPath, URL } from "node:url";



import vue from "@vitejs/plugin-vue";

import { createHtmlPlugin } from "vite-plugin-html";



export default {

  resolve: {

    alias: {

      "@": fileURLToPath(new URL("./src", import.meta.url)),

    },

  },

  plugins: [

    vue(),

    createHtmlPlugin({

      inject: {

        data: {

          cdnScript:

            process.env.NODE_ENV === "production"

              ? '<script src="https://unpkg.com/vue@3"></script>'

              : "",

        },

      },

    }),

  ],

  build: {

    rollupOptions: {

      external: ["vue"],

      output: {

        format: "iife",

        globals: {

          vue: "Vue",

        },

      },

    },

  },

};

Thx.
I wonder if it is the same that importing a font?

PeterlitsZo Mar 11, 2026
Author

@shurintou You can just use @font-face in CSS. BTW, could you please remove the big quote? It is too long.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to use CDN #6846

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 8 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to use CDN #6846

Uh oh!

Uh oh!

PeterlitsZo Feb 10, 2022

Replies: 1 comment · 8 replies

Uh oh!

erlangera Sep 9, 2022

Uh oh!

erlangera Oct 24, 2023

Uh oh!

Hideman85 Oct 24, 2023

Uh oh!

erlangera Oct 26, 2023

Uh oh!

shurintou Mar 10, 2026

Uh oh!

PeterlitsZo Mar 11, 2026 Author

PeterlitsZo
Feb 10, 2022

Replies: 1 comment 8 replies

erlangera
Sep 9, 2022

PeterlitsZo Mar 11, 2026
Author