Vite入门与了解

一、认识vite

• Webpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具
• 比如rollup、parcel、gulp、vite等等
• 什么是vite呢？ 官方的定位：下一代前端开发与构建工具
• 如何定义下一代开发和构建工具呢？
• 我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等
• 所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel
• 但是随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多
• 构建工具需要很长的时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来
• 所以也有这样的说法：天下苦webpack久矣
• Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验
• 它主要由两部分组成
• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持

二、浏览器原生支持模块化

• 现在浏览器已经支持es语法，在使用的时候，只需要在script标签里加上type=‘module’即可

通过一个示例来看一下
math.js

export function sum(num1, num2) {
   
  return num1