学习二十四、Vite 简介

Vite

• Vite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具
  它基于 ECMAScript 标准原生模块系统 (ES Modules) 实现

• 项目依赖

  • Vite
  • @vue/compiler-sfc

• ES Module

  • 现代浏览器都支持 ES Module (IE 不支持)
  • 通过下面的方式加载模块
  • 支持模块的 script 默认延迟加载
    • 类似于 script 标签设置 defer
    • 在文档解析完成后，触发 DOMContentLoaded 事件前执行

• Vite as Vue-CLI

  • Vite 在开发模式下不需要打包可以直接运行

  • Vue-CLI 开发模式下必须对项目打包才可以运行

  • Vite 在生产环境下使用 Rollup 打包

    • 基于 ES Module 的方式打包

  • Vue-CLI 使用 Webpack 打包

• Vite 特点

  • 快速冷启动
  • 按需编译
  • 模块热更新
  • 开箱即用

• Vite 创建项目

  $npm init vite-app
  $cd
  $npm install
  $npm run dev

• 基础使用

  • Vite serve 在服务器端编译处理
  • Vite build 采用 Rollup 进行打包
  • Vite HMR
    • 立即编译当前所修改的文件
  • webpack HMR
    • 会自动一这个文件为入口重写 build 一次，所有涉及到的依赖也都会被重写加载一遍

• 打包 or 不打包

  • 使用 webpack 打包的两个原因：
    • 浏览器环境并不支持模块化
    • 零散的模块文件会产生大量的 HTTP 请求

• 开箱即用

  • TypeScript 内置支持
  • less/sass/stylus/postcss 内置支持 (需要单独安装)
  • JSX
  • Web Assembly

• Vite 核心功能

  • 静态 Web 服务器
  • 编译单文件组件
    • 拦截浏览器不识别的模块，并处理
  • HMR