1.前端常见工具之间的定位与联系，如webpack、rollup、vite、vue-cli等。 2.从运行原理、构建方式、HMR热更新机制、使用成本等方面逐一去分析，vite与webpack之间的差异

看别人代码会发疯 相信大部分同学都有类似的经历吧： 公司的团队中有人离职了或者很久以前的老项目需要迭代更新一些新的功能，就需要还活着的开发人员来接手他们的代码 🤣 没错，我就是那个还活着的开发人员！

在现代前端开发领域，构建工具起着至关重要的作用。Vite 和 Webpack 是两个备受关注的构建工具，它们各自有着独特的特点和优势，同时也存在一些局限性。

先附上源码地址：https://github.com/cwjbjy/vite-react-ts-seed 本文基于vite4+react18+typescript5+react-router-dom6

Vue3 + TypeScript + Vite，目标是搭建好用的前端开发常规底层，支撑10万+代码行项目高效开发

准备工作 详情见GitHub 内置vue-router、commitlint、stylelint、eslint、prettier、unplugin-vue-components、unplugin-au

vite 是新兴的构建工具，它相比 webpack 最大的特点就是快。 那它是如何做到这么快的呢？ 因为 vite 在开发环境并不做打包。 我们创建个 vite 项目： 安装依赖，然后把服务跑起来：

这是一个基于React18并使用Vite4.0构建的管理端项目。它实现了动态路由，标准的RBAC权限模型和多角色多岗位权限模型，包括登录鉴权，菜单管理等功能。

前文 今天我们来一起学习如何配置Vite4中的vite.config.js文件，实现首屏加载优化 一、安装打包视图分析工具 1.安装 在vite.config.js中引入 rollup-plugin-