前言

自从尤大vite2.x写完后，好评如潮，我想尝试下vite，看看在本地到底能比webpack快多少，所以拿手头一个比较大的react项目改造下来测试。本文不包含vite原理，vite相关介绍请看vite官方文档，只记录在改造过程中遇到的问题和解决方案。

开搞

准备工作

首先，在项目中安装vite并且生成一个最简单的vite.config.js。

//vite.config.js
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

export default defineConfig({
  plugins: [reactRefresh()]
})

vite.config.js与index.html都必须在根路径下，index.html内引用入口文件。

在package.json增加vite启动命令。

ok,准备工作已经完成，现在开始我们的改造（趟坑）之路。

给vite增加基本配置

首先，让我怀着必死的决心启动vite，果然，数不清的报错（根本不敢看好么。。。）

error:fsevents.watch is not a function .

解决：删掉package.lock.json 和yarn.lock，重新install。

error: [vite:dep-scan] Failed to resolve entry

这是一个私有的npm包，错误原因是无法加载这个本地库，需要修改这个本地库的package.json的module属性.

module属性修改为正确路径，错误解决。

增加css样式预处理器

sass和一些自定义配置

//vite.config.js
import autoprefixer from 'autoprefixer'
import postcssFlexbugsFixes from 'postcss-flexbugs-fixes'
import postcssPresetEnv from 'postcss-preset-env'

const loder_presetEnv=postcssPresetEnv({
  autoprefixer: {
    flexbox: 'no-2009',
  },
  stage: 3,
})


export default defineConfig({
   //......
    css: {
      modules :{
        scopeBehaviour:'local'
      },
      postcss:{
        plugins:[
          autoprefixer,
          postcssFlexbugsFixes,
          loder_presetEnv
        ]
      },
        preprocessorOptions: {
          less: {
            javascriptEnabled: true,
          },
          scss: {
            // 引入scss全局变量 给导入的路径最后加上; 
            additionalData: `@import "./src/common/styles/base.scss";`,
          },  
        }
    },
    //....
});

import styles from './index.module.scss'

<div className={styles.root}>
</div>

如果项目中样式是modules写法的话，必须在vite.config中加入css.modules，并把所有.scss改为.module.scss。

将全局样式文件修改后缀，写一个改名的小脚本即可。

/*
 * @Description: 批量重命名
 */
const glob = require('glob')
const fs = require('fs');
const files = glob.sync('src/**/*.scss')

files.forEach(oldPath => {
  const newPath = oldPath.replace('.scss','.module.scss')
  fs.rename(oldPath, newPath, (err) => {
    if (err) {
      console.log('err',oldPath)
    }
  })
})

再次启动项目，发现更改的一些全局主题色消失了，加入全局主题配置。

//vite.config.js
       less: {
              //请移除 lessOptions 这一级直接配置选项。
              modifyVars: {
                'primary-color': '#19B5A5',
                'link-color': '#19B5A5',
                'border-color': '#E0E0E0', //全局分隔线
                'border-radius-base': '2px',
                'success-color': '#19B5A5', // 成功色
                'warning-color': '#faad14', // 警告色
                'error-color': '#f5222d', // 错误色
              },
          
            javascriptEnabled: true,
          },

具体配置规则查看less配置项。

样式打包后太大，改成antd按需加载试试。

将全局引入的antd样式注掉。

// import 'antd/dist/antd.less'

增加antd按需加载插件

npm i vite-plugin-imp -D

//vite.config.js
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
 //.....
    plugins: [
        reactRefresh(),
        vitePluginImp({
          libList: [
            {
              libName: "antd",
              style: (name) => `antd/es/${name}/style/`,
            },
          ],
        })
      ]
});

按需加载后打包效果还是很nice的。

样式的修改告一段落，再看其他的问题。

webpack原来注入的一些环境变量全部消失

vite有自己的环境变量配置。地址

自定义vite 配置文件的位置，在vite.config设置 envDir:'./config'。前端文件中获取系统配置直接import.meta.env.VITE_xxx即可，很方便有木有。

在vite.config.js中是不能直接通过import.meta.env.VITE_xxx来获取env内的配置的，那我们怎么区分本地还是生产环境来加载不同的vite插件呢？

不要着急，vite的Issuse内有机智的老哥已经给出了解决办法。

压缩图片

项目打包时需要优化的点vite都会给你提示，不过怎么项目里会有这么大的图片_(:зゝ∠)，压缩图片的插件加一个。

npm i vite-plugin-imagemin -D

//vite.config.js
import viteImagemin from 'vite-plugin-imagemin';
 //....
   plugins: [
        //....
        viteImagemin({
          gifsicle: {
            optimizationLevel: 7,
            interlaced: false,
          },
          optipng: {
            optimizationLevel: 7,
          },
          mozjpeg: {
            quality: 20,
          },
          pngquant: {
            quality: [0.8, 0.9],
            speed: 4,
          },
          svgo: {
            plugins: [
              {
                name: 'removeViewBox',
              },
              {
                name: 'removeEmptyAttrs',
                active: false,
              },
            ],
          },
        }),
      ],

效果很明显。

提供一下vite插件社区地址 github.com/vitejs/awes… ，插件很全，可以按照自己优化的需要来选择。

vite与webpack时间对比

启动时间

webpack 启动时间

vite 启动时间

webpack HMR

vite模块热更新在100～200ms左右，在热更新方面，webpack是完完全全被吊打，模块越多差距越大。 Vite 以原生ESM方式服务源码，只需要在浏览器请求源码时先进行转换再返回转换后的源码。基于这种方式，vite hmr的实现要比webpack的hrm实现更简单更快速。

webpack打包时间

vite打包时间

总结

在启动和热更新方面，vite有无与伦比的优势。

但毕竟vite目前的社区生态还不如webpack完善，项目迁移还是要按实际情况和潜在风险来考虑。

期待vite社区和影响力进一步扩大。

最后，

点个赞吧