總方針：是什么？從哪里來？要到哪里去？
?一、是什么？
* vite ------- vue 作者尤雨溪開發的web開發工具
* 它具有的特性：靜態服務器、構建工具、輕量、開箱即用、極速模塊熱替換、內置Rollup 用于打包項目
* 作者在微博上的發言：
Vite，一個基于瀏覽器原生 ES imports 的開發服務器。利用瀏覽器去解析 imports，在服務器端按需編譯返回，完全跳過了打包這個概念，服務器隨起隨用。同時不僅有 Vue 文件支持，還搞定了熱更新，而且熱更新的速度不會隨著模塊增多而變慢。針對生產環境則可以把同一份代碼用 rollup 打。雖然現在還比較粗糙，但這個方向我覺得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問題。
它的主要特點：基于瀏覽器 native 的 ES module
[ES module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 來開發，省略打包這個步驟，因為需要什么資源直接在瀏覽器里引入即可。
本質上是用C++ / Rust / Go 重寫了依賴分析/模塊構建能力，但是充分利用了已有的生態，使得開發成本極大降低。
## 二、從哪里來？
* 時下熱門的打包構建工具有：parcel 、 rollup（es module/ tree shaking） 、 webpack(最強的性能、擴展能力強)
* 2.1 如何食用
```javascript
# npm 6.x
npm init @vitejs/app <project-name> --template vue
# npm 7+, extra double-dash is needed:
npm init @vitejs/app <project-name> --template vue
# yarn
yarn create @vitejs/app <project-name> --template vue
cd <project-name>
npm install (or `yarn`)
npm run dev (or `yarn dev`)
```
* 2.2 背后的原理
* 2.2.1 如何去掉打包步驟？
打包的概念是開發者利用打包工具將應用各個模塊集合在一起形成 bundle，以一定規則讀取模塊的代碼——以便在不支持模塊化的瀏覽器里使用。
為了在瀏覽器里加載各模塊，打包工具會借助膠水代碼用來組裝各模塊，比如 webpack 使用 map存放模塊 id 和路徑，使用 __webpack_require__ 方法獲取模塊導出。
vite 利用瀏覽器原生支持模塊化導入這一特性，省略了對模塊的組裝，也就不需要生成 bundle，所以打包這一步就可以省略了。
* 2.2.2 如何實現按需加載？
webpack 之類的打包工具會將各模塊提前打包進 bundle 里，但打包的過程是靜態的——不管某個模塊的代碼是否執行到，這個模塊都要打包到 bundle 里，這樣的壞處就是隨著項目越來越大打包后的 bundle 也越來越大。
開發者為了減少 bundle 大小，會使用動態引入 import() 的方式異步的加載模塊（ 被引入模塊依然需要提前打包)，又或者使用 tree shaking 等方式盡力的去掉未引用的模塊，然而這些方式都不如 vite 的優雅，vite 可以只在需要某個模塊的時候動態（借助 import() ）的引入它，而不需要提前打包，雖然只能用在開發環境，不過這就夠了。
## 三、要到哪里去？
正如尤大大所言：徹底解決改一行代碼等半天熱更新的問題。咱們配好料就等餃子下鍋了，真香！
## 四、如何實踐？
直接上干貨：下面鏈接
[vite2-vue2-vant2-ts](https://github.com/liugangtaotie/vite2-vue2-ts)
搭建的這套框架，解決了幾個前端經常遇到的問題：
a. vite2實現開發環境秒級更新；
b. 實現響應式布局，從而達到任意屏幕適配；
c. 實現vant2 自定義主題色；
d. 加入eslint、stylelint、prettier等插件，實現代碼統一規范。
### 4.1 開發環境秒級更新
? ? 上文已經做了解釋，目前只關心實現效果：
啟動時間為757ms，基本是秒級更新。
### 4.2 任意屏幕適配
采用viewpoint方案：
```
// 步驟一
npm i -D postcss-px-to-viewport
// 步驟二，配置postcss.config.js文件
module.exports = ({ file }) => {
? return {
? ? plugins: {
? ? ? // autoprefixer: {},
? ? ? "postcss-px-to-viewport": {
? ? ? ? viewportWidth: 375, // 視口的寬度，對應的時設計稿的寬度/2，一般為750
? ? ? ? unitToConvert: "px",
? ? ? ? viewportHeight: 667, // 視口的高度，對應的是設計稿的高度（也可以不配置）
? ? ? ? unitPrecision: 5, // 指定‘px’轉換為視口單位值的小數位數（很多時候無法整除）
? ? ? ? propList: ["*"], // (Array)指定可以轉換的css屬性，默認是['*']，代表全部屬性進行轉換
? ? ? ? viewportUnit: "vw", // 指定需要轉換成的視口單位，建議使用vw
? ? ? ? fontViewportUnit: "vw",
? ? ? ? selectorBlankList: ["ignore", "tab-bar"], // 指定不需要轉換的類
? ? ? ? minPixelValue: 1, // 小于或等于‘1px’不轉換為視口單位
? ? ? ? mediaQuery: false, // 允許在媒體查詢中轉換為‘px’
? ? ? ? replace: true,
? ? ? ? landscape: false,
? ? ? ? landscapeUnit: "vw",
? ? ? ? landscapeWidth: 568,
? ? ? ? exclude: [], // 排除node_modules文件中第三方css文件
? ? ? ? // exclude: /(\/|\\)(node_modules)(\/|\\)/, // 排除node_modules文件中第三方css文件
? ? ? },
? ? },
? };
};
```
### 4.3 實現vant2 自定義主題色
```
// 步驟一：官網復制theme.less文件到? src/assets/css/theme.less
...
// Tabs
@tabs-default-color: @xx-color-primary;
...
// 步驟二：引入全局樣式
...
import { xxx } from "vant";
import "vant/lib/index.less"; // 全局引入樣式
Vue.use(xxx);
...
// 步驟三：vite.config.ts
...
import path, { resolve } from "path";
...
export default defineConfig({
...
// 配置別名
? resolve: {
? ? alias: [
? ? ? {
? ? ? ? find: /^~/,
? ? ? ? replacement: "",
? ? ? },
? ? ? {
? ? ? ? find: "@",
? ? ? ? replacement: resolve(__dirname, "src"),
? ? ? },
? ? ? {
? ? ? ? find: "@ASS",
? ? ? ? replacement: resolve(__dirname, "src/assets"),
? ? ? },
? ? ? ...
? ? ],
? },
...
css: {
? ? preprocessorOptions: {
? ? ? less: {
? ? ? ? modifyVars: {
? ? ? ? ? hack: `true; @import "@ASS/css/theme.less";`,
? ? ? ? },
? ? ? },
? ? },
? },
...
```
實踐后的效果：
### 4.4 代碼統一規范
加入基本eslint 、stylelint、 prettier 等配置實現代碼統一，[具體詳見](https://github.com/liugangtaotie/vite2-vue2-ts)
推薦的官方文檔
[vue-cli 遷移 vite2 實踐小結](https://zhuanlan.zhihu.com/p/353601634)
[Vite 2.0 初探](https://zhuanlan.zhihu.com/p/360109945)
[備戰2021：Vite2項目最佳實踐](https://zhuanlan.zhihu.com/p/349271585)
[重構于Vite](https://zhuanlan.zhihu.com/p/352216610)
