🎇 Vite 打包构建优化

抽离 node_modules 文件

output.manualChunks 可以将 node_modules 中的文件单独抽离出来，单独打包成一个文件，这样可以减少打包的体积，加快打包速度。

因为 node_modules 中的依赖并不是常常会变的，所以可以将其单独抽离出来，利用浏览器的缓存机制，当依赖没有发生变化时，就不会重新下载。

build: {
    rollupOptions: {
        output: {
            manualChunks: (id) => {
                if (id.includes('node_modules')) {
                    return 'vendor';
                }
            };
        }
    }
}

CDN 加载模块资源

项目中可能会出现一些第三方的模块，比如 lodash、moment 等，这些模块可能会比较大，如果每次都打包到项目中，会导致打包的体积变大，加载的时间变长。

可以通过 vite.config.ts 中的 build.rollupOptions.external 配置，将这些模块通过 CDN 的方式加载，这样可以减少打包的体积，加快打包速度。

在 Vite 有一款插件可以自动将模块转换成 CDN 的方式加载，这款插件就是 vite-plugin-cdn-import。

import viteCDNPlugin from 'vite-plugin-cdn-import';

plugins: [
    viteCDNPlugin({
        modules: [
            {
                name: 'xlsx',
                // 会替换打包时全局变量引入的变量名（全局变量名）
                var: 'XLSX',
                // 会将 script 脚本帮我们插入的head中
                // 注意var的变量名要和脚本文件的导出的变量名一致（全局变量名）
                path: 'https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js',
            },
        ],
    }),
];