当我运行 vite Preview 时，我得到的捆绑包大小为 300KB，当我运行 vite build 时，它会创建一个 900KB 的捆绑包

Question

我在一个react项目中使用Vite。

版本 -

"react": "^18.2.0",
"react-dom": "^18.2.0",
"vite": "^3.0.0",
"@vitejs/plugin-react": "^2.0.0",

这是我的vite.config.js

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build',
  },
});

这是我的package.json脚本 -

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "prettier": "prettier src -check",
    "prepare": "husky install"
  },

当我这样做npm run preview并在浏览器中打开一个网站时，我得到了 size 的包301KB。但是当我这样做时npm run build，它给了我捆绑包的大小986KB！如果vite preview打算在生产中预览网站，为什么vite build在构建时不给我相同大小的捆绑包？

当我构建时，它显示以下消息 -

另外， 的含义是什么986.76 KiB / gzip: 292.94 KiB？

Answer 1

正如 @tony19 所指出的，第一个数字是原始大小，即文件的实际大小。第二个数字是gzip压缩后的压缩大小。

当您使用 构建 vite 时npm run build，默认情况下不应用压缩。

在许多情况下，您的网络服务器将为您处理压缩，因此这不是问题。

但是，在某些情况下，您需要自己进行压缩：

• 如果您的网络服务器不支持压缩（例如，您位于共享主机上并且无法更改服务器设置）
• 如果您有一个静态应用程序并且想要提前压缩内容

在这种情况下，您可以使用vite-plugin-compression2。

为什么使用这个插件？因为 vite-plugin-compression 不再获得更新，而 vite-plugin-compression2 允许您压缩为 gzip 和 brotli（对于所有基于 chrome 的浏览器，更高效的 brotli，对于 Safari 则为 gzip）：

vite.config.ts

import { defineConfig, type PluginOption } from 'vite'
import compression from 'vite-plugin-compression2';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    compression({
      algorithm: 'gzip', exclude: [/\.(br)$ /, /\.(gz)$/]
    }),
    compression({
      algorithm: 'brotliCompress', exclude: [/\.(br)$ /, /\.(gz)$/],
     }),
  ],
})