2021年2月17日，Vite 2.0正式发布了，并在后端圈引发了引发轰动。
受到好评的其原因如下表所示：
◎ 拿掉了装箱关键步骤，可加速UAC。
◎ 可及时处理热预览组件，无法随著组件极大地提高而使热预览减慢。
◎ 或者说的按需校对。
Vite是如前所述应用领域程序native的ES module合作开发的，如前所述Bundleless价值观。
在介绍Vite以后，须要先介绍Bundle和Bundleless。Bundle和Bundleless是三种合作开发方式，自2015年ESM国际标准正式发布后，这三种Attichy就渐渐明晰。
在日常生活合作开发中，通常采用Webpack 对标识符展开校对，并装箱聚合Bundle文档。其其原因如下表所示：
◎ 许多应用领域都运转在HTTP/1.1上，因此各应用领域程序有相连管制。
◎ 控制系统无法间接运转应用领域程序不全力支持的组件，如CommonJS。
◎ 应用领域程序不辨识捷伊句法。
◎ 标识符依赖关系与顺序管理。
但是，在项目达到一定规模后，如前所述Bundle构筑优化的“收益”就变得越来越少，无法实现质的提升。
Webpack 减慢的主要其原因是，它将各个资源装箱整合在一起形成 Bundle，项目规模越大，资源就越多。是否可以不用装箱间接在应用领域程序中执行标识符呢？当然可以，这就是Bundleless，如图1所示。
图1
在Bundleless模式下，应用领域不再须要构筑成一个完整的Bundle，修改文档时也不须要重新聚合Bundle文档，应用领域程序只需重新加载单个文档即可。也就是说，只需刷新即可即时生效。如果有 HotModuleReplace等相关技术加持，则可以实现完美的合作开发体验。
实现 Bundleless 一个很重要的前提是组件的动态加载能力，实现这个功能的主要思路有两个：
◎ 采用System.js之类的ES组件加载器，优点是具有很好的组件兼容性。
◎ 间接利用国际标准的ES module。该module实现已经国际标准化，因此各个应用领域程序厂商也已纷纷全力支持（Edge 79、Firefox 67、Chrome 63、Safari 11.1、Opera 50，这几个应用领域程序全力支持ES module的最低版本 ）。相信以后后端同时整体架构和在各种国际标准化的基础上也会变得更加简单。
Bundle和Bundleless的对比如表1所示。
表1
如前所述ES module的构筑，其实Vite并不是首创，同样的两栖作战在以后有类似的“轮子”，如esbuild、snowpack、es-dev-server等。下面通过示例讲解Vite是如何展开合作开发的。
与常见的合作开发工具一样，Vite提供了用npm或者Yarn一键聚合项目结构的方式。这里采用Yarn聚合一个React项目。
yarn create vite-app vite-project cd vite-project yarn install结果如图2所示。
图2
index.html为页面入口；main.jsx为控制系统主入口；vite.config.js为配置文档，该文档可以类比Vue项目的vue.config.js。
在项目开始以后，先引入几个项目核心库：核心库react-router-dom和history、UI库Ant Design、AJAX库axios和CSS预处理器Less。
首先配置组件库，因为在后面的组件中会用到UI组件。注意，组件库可以在配置文档中引入，而不是在main.jsx中引入。如果在main.jsx中引入，则在创建项目时构筑工具会引入整个CSS文档，这是没有必要的。
Vite须要借助插件vite-plugin-imp 来按需加载。
yarn add vite-plugin-imp -D在vite.config.js中配置插件。
importvitePluginImpfrom vite-plugin-imp plugins: [ vitePluginImp({ libList: [ { libName: “antd”, style: (name) => `antd/lib/${name}/style/index.less`, }, ], }) ], css: { preprocessorOptions: { less: { //内联 JavaScript javascriptEnabled: true, } } }CSS预处理器提取公有CSS变量及CSS函数并放在一个文档中，所以确认增加以上配置。因此配置javascriptEnabled为true，全力支持Less内联JavaScript。
另一个比较实用的功能是自动刷新，Vite也没有掉队，借助插件@
vitejs/plugin-react-refresh即可实现。import reactRefresh from @vitejs/plugin-react-refresh plugins: [ reactRefresh() ]短路径配置
resolve: { alias: { “@”: path.resolve(__dirname, src) } },代理配置
server : { proxy: { /api: { target: http://jsonplaceholder.typicode.com, changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ) } } }环境参数配置
在日常生活合作开发中，有些标识符和配置是要区分环境的。在 Webpack 中，可以在 scripts 中定义NODE_ENV，或者在webpack .config.js中定义DefinePlugin来区分环境。在Vite中，可以在scripts中定义mode来区分环境。
“dev”: “vite –mode development”, //环境值 const env = process.argv[process.argv.length – 1] console.log(“当前环境：”, env) // development我们先在container目录下新建两个组件：home和main。当path为“/”时渲染home组件，当path为“/main”时渲染main组件。
// container/home/home.jsx import{ Button }from antd function Home() { return ( <div> <div>Home, from router</div> <Button type=“primary”>submit</Button> </div> ); } //container/main/index.jsx function Main() { return ( <div> Main, from router </div>); }有了组件之后，下面开始配置router。在routers目录下新建index.js。
import Home from “@/contanier/home” import Main from “@/contanier/main” export default [ { path: “/”, component: Home }, { path: “/main”, component: Main } ]定义配置后，须要在app.jsx中遍历这个数组，聚合路由配置。
//app.jsx import { BrowserRouter asRouter, Route, Switch }from “react-router-dom”; import routes from “./routers” function App() { const[count, setCount] = useState(0) return ( <Router> <div className=“App”> <header className=“App-header”> // 省略部分标识符 <Switch>{ routes.map(route =><Route exact key={route.path} path={route.path}> <route.component /> </Route>) }</Switch> </header> </div> </Router> ) }启动项目
yarn run dev vite v2.1.2dev server running at: > Local: http://localhost:3000/ > Network: http://192.168.1.6:3000/ > Network: http://192.168.192.196:3000/ ready in1982ms.结果如图3所示。
图3
输入
http://localhost:3000/main，结果如图4所示。图4
有了页面组件之后，就须要考虑AJAX请求的事儿了，否则页面是没有灵魂的。在api目录下新建request.js，对axios做一层封装，配置请求拦截器和响应拦截器，这也是后端合作开发中的通用做法。
import axios from “axios”; import StatusCode from “@/constants/statusCode”; const instance = axios.create({ baseURL: “”, timeout: 50000, xsrfCookieName: “xsrf-token”, }); //请求拦截器，如果须要在header中增加一些参数，则可以在这里统一处理instance.interceptors.request.use((config) => { return config; }, (error) => { return Promise.reject(error); } );// 添加一个响应拦截器，对每次返回的数据展开拦截，并展开业务判断 instance.interceptors.response.use( (response) => { return Promise.reject(response.data); }, (error) => { return Promise.reject(error); } );axios拦截器为我们的日常生活合作开发提供了诸多便利，如果须要在每个请求中增加相同的参数，则可以在请求拦截器中展开配置。如果是统一处理返回的数据，如无权限、404、没有登录等这种通用场景，则可以统一在响应拦截器中展开处理。
以上是Vite配合React合作开发的基本配置。
▼
本文节选自《后端合作开发必知必会：从工程核心到前沿两栖作战》一书，欢迎阅读本书介绍更多关于后端合作开发必知必会的知识点。
▊《后端合作开发必知必会：从工程核心到前沿两栖作战》
侯跃伟 著
诠释后端工程化实现细节解密Babel、Deno、WebAssembly、Docker等后端融合本书共5 章。第1、2 章控制系统介绍后端工程化的核心知识，包括Babel 7、ES 规范、Deno 合作开发入门、脚手架、自动化部署、Nginx、Jest 测试、Webpack 5、Vite、Rollup、Parcel 等。第3、4 章着重介绍后端架构的核心价值观，包括后端核心组件的6 种常用设计模式、V8 引擎、宏任务与微任务、异步加载规范和函数式编程等。第5 章通过两栖作战详细介绍如何从0 合作开发微后端和WebAssembly，帮助后端人员开拓视野。
本书控制系统介绍了后端合作开发的工程核心及前沿两栖作战。相信无论是初级合作开发人员，还是具有丰富经验的中高级合作开发人员都能从本书中找到须要的内容，都能从阅读本书中有所收获。
