preface

Since the advent of vite, although the project has not used, but it has been concerned about it, on their own simple one, after all, or to learn to use it

Compatibility requirements

Vite requires node.js version >= 12.0.0

Initializing an application

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

To run the program

  cd my-vue-app
  npm install
  npm run dev
Copy the code

Go to http://localhost:3000/ in your browser

Up to now, a React single-page application has been able to run normally, but this is far from enough in the actual development of applications. Let’s take the time to add some common things to the application in real life development

Use antD, the React UI component library, in your application

applicationantd

NPM I ANTD Installs the component library

Introduce the global style file in SRC /main.jsx

main.jsx

import 'antd/dist/antd.css';
Copy the code

Introduce the corresponding component in 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> ```Copy the code

As of now we can run ANTD in the project.

However, there is a problem, we can NPM run build and look at the package file, as shown in the following figure.

The style files are all packed in, and then we implement the style references on demand

implementationantdIntroduction of styles on demand

Use the ite-plugin-style-import plugin to install the less dependency

```
npm i -D vite-plugin-style-import less
```
Copy the code

Modify the configuration file 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: {// Support inline JavaScript javascriptEnabled: true,}}},})Copy the code

When you run the NPM run build again, you will find that there are no large.css files left.

A complete application must have routing, and we will import routing for the project next

Organize routes, importreact-router-dom

npm i react-router-dom
Copy the code

  1. Run the Route Config command to configure routes

    Add router. Js route file under SRC, add pages, add several pages, as shown in the following directory structure

    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 } ]Copy the code

  2. Modify the main.js file to import our routing rules

    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') )Copy the code

So far, our app has multiple pages that can jump to each other to feel like a complete app. The problem is that the current application is packaged in one file. As our application grows and pages grow, we need Code Splitting based on routes.

Code Splitting

We used Code Splitting the way recommended by the React-Router.

Install the loadable/ Component dependency

npm install @loadable/component
Copy the code

Modify the router-js file to import the page using the import mode

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'))
  }
]
Copy the code

Running NPM Run build at this point shows that multiple files are packaged according to the route, as shown in the figure below

conclusion

As a webpack user, I think vite has a great development experience. It is a very good development tool, and the learning cost is relatively low. It is basically out of the box, with powerful HMR, TS support built in. Its plug-in API and JavaScript API provide a high degree of extensibility and complete type support.

In terms of the actual experience, Vite is much faster than WebPack, but its community development is not as good as WebPack, so hopefully it can develop quickly and bring a better experience to the front-end development.

The above is to implement a Vite based React application from 0️ to ①, hoping to help some friends.

If wrong, please correct. If you think it will help you, you can give me a 👍.

The attached:

vite

route-config

Code Splitting

loadable/component