简单几步，将React项目脚手架Webpack换成Vite⚡⚡，附带性能比较和思考

文章同步在公众号：萌萌哒草头将军，欢迎关注

⚡️ 使用 Vite

前段时间，将练习了时长两年半的 react 项目脚手架换成 vite 了，过程如下

首先使用 vite 创建基础项目框架

npm create vite@latest my-vue-app --template react-ts

将 src 工作目录直接拷贝过来

接着配置常用的路径解析 alias

// vite-config,ts
alias: [
  ...(
    Object.entries({
      '@': path.resolve('src'),
    }).map(([key, val]) => ({ find: key, replacement: val }))
  ),
],
extensions: [".js", ".ts", ".tsx", ".jsx", ".d.ts"],

此时页面可以访问了，但是还是会有 ts 相关报错，

只需要在 tsconfig.json 里添加如下配置：

"paths": {
  "@/*": ["./src/*"]
},

为了使 ci/cd 可以正常进行，还需要将项目默认打包默认目录从 dist 换成 build

// vite-config,ts
export default defineConfig({
  build: {
    outDir: "./build",
  },
});

整个过程很快，

性能优化过程

接下来我执行了打包命令，部署在服务器上看看

在没有任何优化情况下，包体积为 6.7M，比 webpack 版包体积小了 0.4M

部署之后，vite 版 lighthouse 的性能得分 59 分

通过分析，发现是因为没有压缩，大文件太多，加载过慢导致的，所以接下来，我们进行压缩文件。

压缩配置

import viteCompression from "vite-plugin-compression";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    outDir: "./build",
    rollupOptions: {
      plugins: viteCompression({
        verbose: true, // 是否在控制台中输出压缩结果
        disable: false,
        threshold: 10240, // 阈值，单位为b
        algorithm: "gzip", // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
        ext: ".gz", // 格式
        deleteOriginFile: false, // 是否清除源文件，简易这里保留
      }),
    },
  },
  // ...
});

并不是所有的 nginx 都带有 gzip 模块，所以最好保留源文件，以备不时之需

打包之后

同时需要，nginx 需要开启压缩识别，否则无效。

server {
    # 其他配置

    gzip on;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # 其他配置
}

通过压缩文件优化后，性能有了明显提升。

我的项目没有图片，所以没有使用压缩图片的插件，如果需要可以使用vite-plugin-imageminopen in new window

性能比较

而 webpack 版的 lighthouse 的性能得分 73 分

webpack 版已经完成了代码压缩、代码分割、路由懒加载。

对比两个版本，webpack 的 FCP 指标十分优秀，Vite 的 TBT 指标很健康。

虽然，目前来看两者差距不大。但是 vite 的优势很明显，

使用默认配置加上代码压缩，可以比 webpack 优化配置之后更好一点。

思考

此时影响的因素主要请求链的长度过长

翻译：下面的关键请求链显示了哪些资源是以高优先级加载的。考虑减少链的长度，减少资源的下载大小，或者推迟不必要资源的下载以提高页面负载。

我们可以看到上面的请求链接，好几个都是只有几 kb 的小文件。而这些小文件是外层 index 文件的依赖文件，所以会造成阻塞，小文件小文件众多阻塞的时间就越久。

vite 将文件根据路由切割成多个子模块，每个模块的文件来自于不同的依赖包的子集。并且通过 import 的方式，引入到主文件中。

如果我们在小文件引入前，将小文件进行合并，就可以有效缩短链长度，从而更进一步的提高性能。目前还没有类似的插件。

今天的分享就到这里了，感谢你的阅读！

简单几步，将React项目脚手架Webpack换成Vite⚡⚡，附带性能比较和思考

# ⚡️ 使用 Vite

# 性能优化过程

# 性能比较

# 思考

⚡️ 使用 Vite

性能优化过程

性能比较

思考