使用vite升级旧React项目

背景：

随着项目的迭代更新，新加入的依赖库越来越多、打包编译的速度越来越慢。之前的是使用webpack，最近看到一款vite感觉速度很快，安排上。

Vite

Vite是针对Vue开发的一款编译工具，作用和webpack大致相同，接下来开始针对项目升级。

1、使用官方脚手架搭建项目

• 支持 typescript
• 基于原生 ES 模块，即 <script type="module" >，做到快速加载
• 使用 Rollup 打包代码（线上生产环境）
• 利用对 HTTP 头信息的控制，优化缓存与重加载，高效率利用浏览器能力

npm init @vitejs/app my-react-app -- --template react-ts

2、配置 antd 添加 vite-plugin-imp 依赖，在 vite.config.ts plugins 中添加

export default defineConfig({
  plugins: [
    react(),
    // 配置 antd
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          // style: name => `antd/lib/${name}/style/index.css`,
          style: () => `antd/dist/antd.css`,
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      },
    },
  },
  server: {
    port: 6001,
    open: true,
  },
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
})

3、配置环境 在package.json中配置，区分线上线下环境

"scripts": {
    "start:dev": "vite --mode dev", // 开发
    "start:local": "vite --mode local", // 上线
    "build": "vite build",
    "preview": "vite preview"
  },

4、 运行 经过不断折腾，采坑，最后终于配置完毕。现在体验下编译速度

喜欢的可以关注我的博客