1. build 视图分析依赖文件

npm install --save-dev rollup-plugin-visualizer

import { defineConfig } from "vite";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
     plugins: [
        visualizer({
            gzipSize: true,
            brotliSize: true,
            emitFile: false,
            filename: "test.html", //分析图生成的文件名
            open:true //如果存在本地服务端口，将在打包后自动展示
        }),
    ],
});

参数	类型	解释
filename/file	string	生成分析的文件名
title	string	html标签页标题
open	boolean	以默认服务器代理打开文件
template	string	可选择的图表类型
gzipSize	boolean	搜集gzip压缩包的大小到图表
BrotliSize	boolean	搜集brotli压缩包的大小到图表
emitFile	boolean	为true时分析文件出现在打包文件包下，否则在项目目录下
sourcemap	boolean	使用sourcemap计算大小
projectRoot	string, RegExp	文件根目录（默认在打包目录下）

2. CDN

npm install vite-plugin-cdn-import --save-dev

有些是自动完成的

自动完成支持的 module
"react" | "react-dom" | "react-router-dom"
"antd" | "ahooks" | "@ant-design/charts"
"vue" | "vue2" | "@vueuse/shared”
"@vueuse/core" | "moment" |
"eventemitter3" | "file-saver"
"browser-md5-file" | "x1sx" | "crypto-js"
"axios" | "lodash" | "localforage"

import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'

export default {
    plugins: [
        importToCDN({
            modules: [
                autoComplete('react'),
                autoComplete('react-dom'),
                autoComplete('vue'), // vue2 use autoComplete('vue2')
                autoComplete('@vueuse/shared'),
                autoComplete('@vueuse/core'),
                // ...
                {
                    name: 'react',
                    var: 'React',
                    path: `umd/react.production.min.js`,
                },
                {
                    name: 'react-dom',
                    var: 'ReactDOM',
                    path: `umd/react-dom.production.min.js`,
                },
            ],
        }),
    ],
}

3. 依赖文件分包

  在我们没有配置构建工具的分包功能时，构建出来的build将无比巨大且是独立的一个 js and css文件， 这样就会存在本地加载文件的压力， 已经成熟的方案在 rollup 和 webpack中都有概念；

4. gzip 压缩文件