阅读 146

vite + react + antd 搭建一个单页面应用

前言

自从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 看一下打包文件,如下图,

image.png

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

实现 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文件了。

image.png

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

组织路由,引入react-router-dom

npm i react-router-dom
复制代码
  1. 使用 Route Config配置路由

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

    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
      }
    ]
    复制代码
  2. 修改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'))
  }
]
复制代码

此时运行npm run build 就会发现会根据路由打包多个文件,如下图

image.png

结语

作为一个一直使用webpack的用户,个人觉得vite的开发体验还是很棒的,是一个很不错的开发工具,而且它的学习成本会比较低,基本上是开箱即用,内置了强大的HMR、TS支持,它的 插件 API 和 JavaScript API 带来了高度的可扩展性,并有完整的类型支持。

从实际的体验上来说,vite相比webpack的速度确实是快很多,但是它的社区发展确实不如webpack,希望它能够快速的发展起来,为前端开发带来更好的体验。

以上就是从 0️⃣ 到 ① 实现一个基于vitereact应用,希望可以帮到一些朋友。

如果错误,还请指正。如果你觉得对你有帮助的话,就给一个 👍 吧。

附:

vite

route-config

Code Splitting

loadable/component

文章分类
前端
文章标签