登录免费注册



Vite知识总结

首页  思维导图  详情



Vite知识总结

2021-12-03 10:52:34   1  举报





AI智能生成

Vite官方文档的总结

前端

vue

模版推荐

作者其他创作

大纲/内容

为什么选择Vite

现实问题

浏览器支持ES模块之前

JS原生机制缺乏模块化方式

打包

工具抓取、处理和链接我们的源码模块到文件中使其可以运行在浏览器

JS代码量增大出现性能瓶颈

几千个模块

启动几分钟

HMR 更新需要数秒

问什么生产环境仍需打包

嵌套导入缓慢

HTTP/2多路复用也不能改善

性能优化

tree-shaking

树摇

懒加载

chunk分割

更好缓存

EsBuild为什么

虽然快

css处理代码分割不够成熟

选择rollup

Vite与其他Bundless工具区别

Snowpack

Helloworld

总览

Vite 

法语意为 "快速的"，发音 /vit/

新型前端构建工具

开发服务器

基于原生ES丰富的内建功能

支持Vue sfc

支持JSX

热更新模块

构建指令

基于Rollup

静态资源优化

浏览器

开发环境

支持原生ES模块导入

生产环境

支持ES模块浏览器

通过@vitejs/plugin-legacy

支持非ES模块浏览器

Helloworld

js

yarn create vite js

vue

yarn create vite vue --template vue

使用社区模板

degit

现在git资源工具

degit makes copies of git repositories.

功能详解

NPM 依赖解析和预构建

提高页面加载速度

CommonJS / UMD 转换为 ESM 格式

原生不支持的裸模块加载模块文件没有没有扩展名

基于esbuild

模块热重载

内置

Vue 单文件组件

React Fast Refresh

TypeScript

只转义不做类型检查

基于esbuild

esbuild

不支持类型信息转义

Vue

Vue3.0

Vue2.0

JSX

CSS

静态资源处理

JSON

Glob 导入

Web Assembly

Web Worker

构建优化

动态导入 Polyfill

CSS 代码分割

预加载指令生成

异步 Chunk 加载优化

依赖预构建

静态资源处理

构建生产版本

部署静态站点

环境变量与模式

服务端渲染

后端集成

Vite生态

 Collect

Get Started

AI的12个核心概念总结

年度总结模板：阅读书单总结与知识体系构建

 Collect

Get Started

年度总结模板：阅读书单总结与知识体系构建

 Collect

Get Started

知识点

 Collect

Get Started

月总结













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document