当我运行 vite 预览时，我得到 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

并在浏览器中打开一个站点时，我得到大小为

301KB

的捆绑包。 但是当我做

npm run build

时，它给了我

986KB

的捆绑包大小！ 如果

vite preview

打算在生产中预览站点，为什么

vite build

在构建时没有给我相同大小的包？

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

另外，

986.76 KiB / gzip: 292.94 KiB

是什么意思？

Answer 1

如@tony19所述，第一个数字是raw大小，这是文件的实际大小。第二个数字是用gzip压缩后的compressed大小。

当你使用

npm run build

构建vite时，默认情况下，不应用压缩。

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

但是，在某些情况下，您会希望自己进行压缩：

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

在这种情况下，您可以使用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)$/],
     }),
  ],
})