vite配置-打包配置

1. 分包

修改vite.config.ts

• 通过() => import()形式加载的组件会自动分包
• 第三方插件需手动分包

build: {
    rollupOptions: {
        output: {
            manualChunks: {
                vue: ['vue', 'pinia', 'vue-router'],
                elementIcons: ['@element-plus/icons-vue'],
            },
        },
    },
}

2. 生成.gz文件

1.安装

yarn add vite-plugin-compression -D

2.修改vite.config.ts

默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用

使用 apply 属性指明它们仅在 build 或 serve 模式时调用

这里打包生成 .gz 插件仅需在打包时使用

import viteCompression from 'vite-plugin-compression'

plugins: [
    //...
    {
        ...viteCompression(),
        apply: 'build',
    },
],

3. js和css文件夹分离

export default defineConfig({
    build: {
      rollupOptions: {
        output: {
          chunkFileNames: "static/js/[name]-[hash].js",
          entryFileNames: "static/js/[name]-[hash].js",
          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
        },
      },
    },
  });

4. 分析生成包的大小

1.安装

rollup-plugin-visualizer

2.修改vite.config.ts

import { visualizer } from 'rollup-plugin-visualizer';

plugins: [
    //...
    visualizer({ open: true }),
]