vite + react + antd 搭建一个单页面应用前言自从vite问世，虽然项目中还没有用过，但是对它一直有所

站长

2024年10月10日 18:43 · 阅读数 14

前言

自从vite问世，虽然项目中还没有用过，但是对它一直有所关注，就自己简单的撸一遍，毕竟还是要学以致用的嘛

兼容性要求

Vite 需要 Node.js 版本 >= 12.0.0

初始化应用

npm init vite@latest my-vue-app --template react

运行程序

  cd my-vue-app
  npm install
  npm run dev

在浏览器中访问 http://localhost:3000/

截止目前已经可以正常运行起来一个React的单页面应用，但是仅此的话在实际的开发应用中是远远不够的。接下来就慢慢给应用加入实际开发中常见的东西吧

在应用中使用 react 的 UI 组件库 antd

应用`antd`

npm i antd 安装组件库

在 src/main.jsx 中引入全局的样式文件

main.jsx

import 'antd/dist/antd.css';

在 src/App.jsx 引入对应的组件

```
import { Menu, Dropdown, Button } from 'antd';

const menu = (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        3rd menu item
      </a>
    </Menu.Item>
  </Menu>
);

...
...

<Dropdown overlay={menu} placement="bottomLeft" arrow>
  <Button>bottomLeft</Button>
</Dropdown>

```

截止目前我们可以在项目中运行antd。

不过现在有一个问题，我们可以npm run build 看一下打包文件，如下图，

vite + react + antd 搭建一个单页面应用前言自从vite问世，虽然项目中还没有用过，但是对它一直有所

样式文件会被全部打包进去，接下来我们就要实现样式的按需引用

实现 `antd` 样式的按需引入

使用 vite-plugin-style-import 插件，安装less依赖

```
npm i -D vite-plugin-style-import less
```

修改vite.config.js配置文件

```
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import styleImport from 'vite-plugin-style-import';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh(),
    styleImport({
      libs: [
        {
          libraryName: 'antd',
          esModule: true,
          resolveStyle: (name) => {
            return `antd/es/${name}/style/index`;
          }
        }
      ],
    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      }
    }
  },
})
```

此时重新执行npm run build，会发现打包后的产物，已经没有过大的.css文件了。

vite + react + antd 搭建一个单页面应用前言自从vite问世，虽然项目中还没有用过，但是对它一直有所

一个完整的应用，肯定少不了路由，接下里我们要为项目引入路由

组织路由，引入`react-router-dom`

npm i react-router-dom

使用 Route Config配置路由

在src下新增router.js路由文件，新增pages,添加若干页面，如下图目录结构

vite + react + antd 搭建一个单页面应用前言自从vite问世，虽然项目中还没有用过，但是对它一直有所

router.js 文件

import Index from './pages/index';
import About from './pages/about';
import My from './pages/my';

export const routerConfig = [
  {
    path: '/Index',
    // exact: true,
    component: Index
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/my',
    component: My
  }
]

修改main.js文件，引入我们的路由规则

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import {routerConfig} from './router';

function RouteWithSubRoutes(route) {
  return (
    <Route
      path={route.path}
      exact={route.exact}
      render={(props) => <route.component {...props} />}
    />
  );
}

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Switch>
        <Route path="/" exact>
            <App />
        </Route>
        {routerConfig.map((route, i) => (
          <RouteWithSubRoutes key={i} {...route} />
        ))}
      </Switch>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
)

截止目前，我们的应用拥有了多个页面，多个页面之间可以互相跳转，这样才像是一个完整的应用。那么问题又来了，现在的应用是打包在一个文件中的，随着我们应用的增大，页面的增多，我们是需要将代码根据路由做到分离打包（Code Splitting）。

代码分隔（Code Splitting）

我们使用react-router推荐的方式去做代码分隔(Code Splitting)。

安装 loadable/component依赖

npm install @loadable/component

修改router.js文件，使用import的方式引入页面

import loadable from '@loadable/component'

export const routerConfig = [
  {
    path: '/Index',
    // exact: true,
    component: loadable(() => import('./pages/index'))
  },
  {
    path: '/about',
    component: loadable(() => import('./pages/about'))
  },
  {
    path: '/my',
    component: loadable(() => import('./pages/my'))
  }
]