简单几步，将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',
  }
})

整个过程很快，

性能优化过程

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

扫描二维码关注公众号，回复： 15741122 查看本文章

在没有任何优化情况下，包体积为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-imagemin

性能比较

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

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

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

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

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

思考

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

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

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

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

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

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