Vite打包优化之缩小打包体积实现详解

plugins:[
     visualizer({ open: true }) // 自动开启分析页面
]

import { LabelLayout, UniversalTransition } from 'echarts/features';

 resolve: {
      alias: {
        '@': pathResolve('src') + '/',
        '@views': pathResolve('./src/views') + '/',
      },
      extensions: ['.js', '.vue', '.json'], 
    },

 build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',  // 引入文件名的名称
        entryFileNames: 'js/[name]-[hash].js',  // 包的入口文件名称
        assetFileNames: '[ext]/[name]-[hash].[ext]' // 资源文件像 字体，图片等
      }
    }
  }

 // vite.config.ts
build: {
    // rollup 配置
    rollupOptions: {
        output: {
            manualChunks(id: any): string {  
                if (id.includes("node_modules")) {
                    return id
                            .toString()
                            .split("node_modules/")[1]
                            .split("/")[0]
                            .toString();
		        }
            }
        }
    }
}

build: { 
      terserOptions: {
        compress: {
          //生产环境时移除console
          drop_console: true,
          drop_debugger: true,
        },
      },
    //   关闭文件计算
      reportCompressedSize: false,
    //   关闭生成map文件 可以达到缩小打包体积
      sourcemap: false, // 这个生产环境一定要关闭，不然打包的产物会很大
}

  legacyPlugin({
      targets: ['chrome 52', 'Android > 39', 'iOS >= 10.3', 'iOS >= 10.3'], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
    })

rollupOptions: {
        //  告诉打包工具 在external配置的 都是外部依赖项  不需要打包
        external: ['vue'],
        plugins: [
            // 避免打包和生产模式运行出错 在这里声明公共模块
          externalGlobals({
            //  "在项目中引入的变量名称" ："CDN包导出的名称，一般在CDN包中都是可见的"
            vue: 'Vue', 
          }),
        ] 
      },

// 引入
import { createHtmlPlugin } from 'vite-plugin-html';
// 将下面的添加到plugin下
createHtmlPlugin({
    minify: true,
    inject: {
        data: {
        title: ENV.VITE_APP_TITLE,  // 这里是配置的环境变量
        vuescript:'<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>',
        },
     },
    }),

<% vuescript %>

viteCompression({
    verbose: true,    
    disable: false,
    threshold: 10240,  
    algorithm: 'gzip',
    ext: '.gz',
    })

    server{
        #gzip
        #开启gzip功能
        gzip on; 
        #开启gzip静态压缩功能
        gzip_static on; 
        #gzip缓存大小
        gzip_buffers 4 16k;
        #gzip http版本
        gzip_http_version 1.1;
        #gzip 压缩级别 1-10 
        gzip_comp_level 5;
        #gzip 压缩类型
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; 
        gzip_vary on; 
    }