diff --git a/src/page/guide/md/build-tools.md b/src/page/guide/md/build-tools.md
index 41069d6..ba773ab 100644
--- a/src/page/guide/md/build-tools.md
+++ b/src/page/guide/md/build-tools.md
@@ -7,19 +7,20 @@
 - [npm scripts 使用指南](https://www.ruanyifeng.com/blog/2016/10/npm_scripts.html)
 - [npm scripts 官方文档](https://docs.npmjs.com/misc/scripts)
 
-## 常用打包工具
+# 常用打包工具
 
 - Webpack
+- Vite
 - Rollup
 - Parcel
 - Gulp/Grunt
-- 最近流行的： Snowpack / Vite
+- Snowpack
 
 ## 📄 文章
 
 - [Webpack 中文官方文档](https://www.webpackjs.com/concepts/)
+- [Vite 中文官方文档](https://cn.vitejs.dev/)
 - [Webpack demos-阮一峰老师出品](https://github.com/ruanyf/webpack-demos)
 - [Rollupg官方文档](https://rollupjs.org/guide/en/)
 - [Snowpack官方文档](https://www.snowpack.dev/)
 - [精读《snowpack》](https://zhuanlan.zhihu.com/p/144993158)
-- [vitejs/vite](Native-ESM powered web dev build tool. It's fast)
diff --git a/src/page/index/roadmap.js b/src/page/index/roadmap.js
index 153c230..cefcc22 100644
--- a/src/page/index/roadmap.js
+++ b/src/page/index/roadmap.js
@@ -162,14 +162,15 @@ export const all = [
       [],
       [
         c("自动化构建", { x: 600, y: 1200 }, 100, {}, [
-          c("npm script", 800, 100),
-          c("gulp", 800, 100, { bgColor: "#CCCCCC" }),
+          c("npm script", 740, 100),
+          c("gulp", 740, 100, { bgColor: "#CCCCCC" }),
         ]),
-        c("模块化打包", { x: 600, y: 1360 }, 100, {}, [
-          c("Webpack", 800, 100, { tag: TAG.recommand }),
-          c("Rollup", 800, 100, { tag: TAG.optional }),
-          c("Parcel", 800, 100, { tag: TAG.optional }),
-          c("Snowpack", 800, 100, { tag: TAG.optional }),
+        c("模块化打包", { x: 600, y: 1380 }, 100, {}, [
+          c("Webpack", 850, 100, { tag: TAG.recommand }),
+          c("Vite", 850, 100, { tag: TAG.recommand }),
+          c("Rollup", 850, 100, { tag: TAG.optional }),
+          c("Parcel", 850, 100, { tag: TAG.optional }),
+          c("Snowpack", 850, 100, { tag: TAG.optional }),
         ]),
       ],
     ],
@@ -414,14 +415,14 @@ export const all = [
     x: 300,
     y: 4500,
     process: 1,
-    link:"/learn-from-github"
+    link: "/learn-from-github"
   },
   {
     text: "翻滚吧！后浪！",
     x: 400,
     y: 4900,
     process: 1,
-    link:"/afterwave"
+    link: "/afterwave"
   },
 ];
 function getRoadmapByProcess(process) {