vite 将 react/antd 核心包变成 external/umd 方式

Vite 里将一些常用组件包，外置，加速打包体积

01 添加依赖

核心依赖

选装
必装

# 打包前、后对比 -> 会在根目录产生一个 stats.html 文件
yarn add --dev rollup-plugin-visualizer
# 必装
yarn add --dev vite-plugin-externals

02 核心 vite 配置

常用配置 vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { viteExternalsPlugin } from 'vite-plugin-externals';
import { visualizer } from 'rollup-plugin-visualizer';

// import { VitePWA } from 'vite-plugin-pwa';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    visualizer(),
    react(),
    viteExternalsPlugin({
      'js-beautify': 'jsBeautify',
      'sortablejs': 'Sortable',
      'prismjs': 'Prism',
      'lodash': '_',
      'axios': 'axios',
      'react': 'React',
      'react-dom': 'ReactDOM',
      'antd': 'antd'
    })
  ],
  build: {
    rollupOptions: {
      // plugins: [visualizer()],
      external: ['react', 'react-dom', 'antd', '@ant-design/icons', 'dayjs'],
      output: {
        format: 'umd',
        globals: {
          'react': 'React',
          'react-dom': 'ReactDOM',
          'antd': 'antd',
          'dayjs': 'dayjs',
          '@ant-design/icons': 'icons'
        }
      }
    }
  }
});

03 对应 umd 在 global 中添加

核心 HTML 引入对应在的 UMD 包

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="referrer" content="never" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
  <script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
  <script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
  <script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.3.1/antd.min.js"></script>
  <script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-icons/5.0.1/index.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.3/beautify.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.8.4/axios.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.6/Sortable.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://unpkg.com/@jswork/loading-screen@1.0.7/dist/lskit.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link crossorigin="anonymous" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.3.1/reset.min.css" />
  <link rel='stylesheet' type='text/css' href='https://unpkg.com/@jswork/loading-screen@1.0.7/dist/index.css' />
  <title>Admin</title>
</head>
<body>
<div id="root"></div>
<script>
  if (global === undefined) var global = window;
</script>
<script type="module" src="/src/main.tsx"></script>
<script>
  window.lskit();
</script>
</body>
</html>