vite知识体系| 青训营

91 阅读3分钟

vite简介

Vite是新一代的前端构建工具

两大组成部分:No-bundle开发服务,源文件无需打包;生产环境基于Rollup的Bundler

核心特征:高性能,dev启动速度和热更新速度非常快;简单易用,开发者体验好

Vite使用

安装 Vite  npm install vite --save-dev

创建项目: vite create [project]

启动开发服务器:使用 npm run dev 启动开发服务器;

使用 npm run build 输出打包文件到指定目录。

Vite配置

vite 配置文件:可以在项目根目录下创建 vite.config.jsvite.config.js` 文件,配置 Vite 的一些选项;

插件配置:可以在 vite.config.jsvite.config.js` 文件中使用插件,例如配置热更新、输出文件路径等;

启动服务器配置:可以在 vite.config.js文件中配置启动服务器的一些选项,例如端口号、热更新等。

Vite优缺点

优点:采用 ES module 作为默认的模块加载方式,支持按需加载和 Tree shaking,可以减少打包文件的大小;采用了热更新技术,可以在开发过程中实时更新代码,提高开发效率;集成了启动服务器,可以快速预览和调试代码;支持配置文件和插件,可以灵活地定制开发环境。 缺点:相比于其它构建工具,Vite 是一个新的框架,社区和生态相对较小,可能存在一些问题需要解决。

Vite 解决了 Webpack 哪些问题

随着项目的复杂度升级,代码规范和管理就必须要同步提升。于是,编程社区中提出了多种模块化规范,服务端选择了 CommonJS 规范,客户端选择 AMD 规范较多,但是,两种模块化规范也都存在一定的问题,都是 JS 编程,有两个不同的模块化规范,在 JS 语言层面还是不够的,终于在 ES6 中,ECMA 委员会推出了语言层面模块系统:ES Modules 规范

模块化可以帮助我们更好地解决复杂应用开发过程中的代码组织问题,但是随着模块化思想的引入,我们的前端应用又会产生了一些新的问题,比如:

  • 首先,我们所使用的 ES Modules 模块系统本身就存在环境兼容问题。尽管现如今主流浏览器的最新版本都支持这一特性,但是目前还无法保证用户的浏览器使用情况。所以我们还需要解决兼容问题
  • 其次,模块化的方式划分出来的模块文件过多,而前端应用又运行在浏览器中,每一个文件都需要单独从服务器请求回来。零散的模块文件必然会导致浏览器的频繁发送网络请求,影响应用的工作效率
  • 最后,谈一下在实现 JS 模块化的基础上的发散。随着应用日益复杂,在前端应用开发过程中不仅仅只有 JavaScript 代码需要模块化,HTML 和 CSS 这些资源文件也会面临需要被模块化的问题。而且从宏观角度来看,这些文件也都应该看作前端应用中的一个模块,只不过这些模块的种类和用途跟 JavaScript 不同

对于开发过程而言,模块化肯定是必要的,所以我们需要在前面所说的模块化实现的基础之上引入更好的方案或者工具,去解决上面提出的 3 个问题,让我们的应用在开发阶段继续享受模块化带来的优势,又不必担心模块化对生产环境所产生的影响