vue3+ts+vite antd自定義主題和vite打包配置資源壓縮和分類打包， 第十一回

直接貼出vite.config.ts 的配置

  plugins:[
      vue(),
      AutoImport({
        imports: ['vue', 'vue-router'], // 自動導入vue和vue-router
        resolvers:[
          AntDesignVueResolver(), // 自動導入ant-design-vue
        ]
      }),
      Components({
        resolvers:[AntDesignVueResolver({importStyle:"less", resolveIcons: true})] // 自動導入和註冊 antd 組件庫
      }),
      viteCompression({
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: 'gzip', // 使用gzip 壓縮資源
        ext: '.gz',
        deleteOriginFile: true, // 壓縮後是否刪除壓縮源文件
      })
    ],
    css: {
      preprocessorOptions: {  // antd自定義主題
        less: {
          modifyVars: {
            'primary-color': '#5865F2',
            'link-color': '#5865F2',
          }, 
          javascriptEnabled: true,
        },
      },
    },
    envDir:'./env', // 配置env文件目錄
    envPrefix:['VITE_','APP_'], // 配置env文件前綴
    build:{
        minify: 'esbuild',
        chunkSizeWarningLimit: 1000, // 提高超大靜態資源警告大小
        cssCodeSplit: true,
        emptyOutDir: true,
        sourcemap: false,
        assetsDir: 'assets', // 默認 assets
        outDir: 'dist',      // 默認 dist
        rollupOptions: {
            output: {
                compact: true,
                entryFileNames: "static/js/[name]-[hash].js",
                chunkFileNames: "static/js/[name]-[hash].js",
                assetFileNames: "static/[ext]/[name].[ext]",
                manualChunks(id) {
                  if (id.includes('node_modules')) {
                    return id.toString().split('node_modules/')[1].split('/')[0].toString();
                  }
                }
            }
        },
    },
    esbuild: { // 打包的過程裏刪掉開發的時候各種console和debugger
      drop: mode === 'production' ? ['console', 'debugger'] : []
    },
　　

　　開啓gizp資源壓縮之後，需要更改nginx的配置，找到nginx使用的配置文件，加入以下配置

# 開 啓 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 image/jpeg image/gif image/png;
 
# 是 否 在 http header中 添 加 Vary: Accept-Encoding， 建 議 開 啓
gzip_vary on;

 
配置完之後，需要重新reload一下，使新的配置生效

nginx -s reload