Vite と Webpack が CDN パッケージを使用する方法

パッケージ化出力のディレクトリサイズを合理化するためにdist、CDN 外部パッケージを導入して、パッケージ化ボリュームを削減し、パッケージ化を高速化できます。導入方法Viteを紹介します。WebpackReact CDN外部包

1. Vite が CDN パッケージを導入

1. プラグインをインストールする

npm i @vitejs/plugin-react-refresh vite-plugin-cdn-import -D

以前にpackage.jsonインストールされていた場合はreact、忘れずにクリアしてください。

2. 手動設定

// vite.config.js
import reactRefresh from '@vitejs/plugin-react-refresh'
import importToCDN from 'vite-plugin-cdn-import'

export default {
    
    
    plugins: [
        importToCDN({
    
    
            modules: [
                {
    
    
                    name: 'react',
                    var: 'React',
                    path: `umd/react.production.min.js`,
                },
                {
    
    
                    name: 'react-dom',
                    var: 'ReactDOM',
                    path: `umd/react-dom.production.min.js`,
                },
            ],
        }),
    ],
}

name: モジュール名。プロジェクトにimport導入されるときのパッケージ名です。例:import React, { useState } from 'react';
var: cdn 外部パッケージvarによって定義されたグローバル変数名。
path: cdn 外部パッケージのアドレス。

3. 自動設定

// vite.config.js
import reactRefresh from '@vitejs/plugin-react-refresh'
import importToCDN, {
    
     autoComplete } from 'vite-plugin-cdn-import'

export default {
    
    
    plugins: [
        importToCDN({
    
    
            modules: [
                autoComplete('react'),
                autoComplete('react-dom')
            ],
        }),
        reactRefresh(),
    ],
}

自動構成でサポートされるパッケージ:

"react" | "react-dom" | "react-router-dom" | 
"antd" | "ahooks" | "@ant-design/charts" | 
"vue" | "vue2" | "@vueuse/shared" | 
"@vueuse/core" | "moment" | 
"eventemitter3" | "file-saver" | 
"browser-md5-file" | "xlsx | "crypto-js" |
"axios" | "lodash" | "localforage"

2. Webpack が CDN パッケージを導入

以前にpackage.jsonインストールされていた場合はreact、忘れずにクリアしてください。

1.config/config.jsを設定する

export default defineConfig({
    
    
  // webpack5: {
    
    
  //   externals: {
    
    
  //     react: "React"
  //   }
  // },
  chainWebpack(config) {
    
    
    config.externals({
    
    
      // '模块名': '全局变量名'
      react: 'React',
    });
  }
})

2. HTML テンプレートを変更する

それを開いてsrc\pages\document.ejs、タグ内に次のファイルを導入します。

<script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>

3. CDN オープンソースパッケージウェアハウス

推奨される CDN パッケージウェアハウス: https://www.bootcdn.cn/react/Recommend
version UMD、例:
ここに画像の説明を挿入します

UMM: UMD バージョンの共通モジュールバージョンで、複数のモジュールメソッドをサポートします。
EJS: CommonJS - 主に Nodejs プロジェクトで使用されます。
ESM: ECMAScript モジュール。es6 の esmodule の静的導入メカニズムに基づいています。