Vite的基本使用

什么是vite呢? 官方的定位:下一代前端开发与构建工具;
它主要由两部分组成:
一个开发服务器,它基于原生ES模块提供了丰富的内建功能,HMR的速度非常快速;
一套构建指令,它使用rollup打开我们的代码,并且它是预配置的,可以输出生成环境的优化过的静态资源
但是,目前vite虽然已经更新到2.0,依然并不算非常的稳定,并且比较少大型项目(或框架)使用vite来进行构建;
pvite的整个社区插件等支持也还不够完善
安装vite
npm install vite –g # 全局安装
npm install vite –D # 局部安装
通过vite来启动项目:
npx vite
vite可以直接支持css的处理
vite直接支持postcss的转换:
只需要安装postcss,并且配置 postcss.config.js 的配置文件即可
vite对TypeScript是原生支持的,它会直接使用ESBuild来完成编译:
p只需要直接导入即可;
安装支持vue的插件:
npm install @vitejs/plugin-vue -D
在vite.config.js中配置插件:

const vue = require('@vitejs/plugin-vue')
module.exports = {
  plugins: [
    vue()
  ]
}

还需安装一个插件
npm install @vue/compiler-sfc -D

Vite打包项目
npx vite build
真实开发在package.json的scripts自定义运行和打包命令
vite内部用了ESbuild技术
ESBuild为什么这么快呢?
使用Go语言编写的,可以直接转换成机器代码,而无需经过字节码;
ESBuild可以充分利用CPU的多内核,尽可能让它们饱和运行;
ESBuild的所有内容都是从零开始编写的,而不是使用第三方,所以从一开始就可以考虑各种性能问题;
vite与webpack的区别
webpack会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。
由于vite在启动的时候不需要打包,也就意味着不需要分析模块的依赖、不需要编译,因此启动速度非常快。当浏览器请求某个模块时,再根据需要对模块内容进行编译。这种按需动态编译的方式,极大的缩减了编译时间,项目越复杂、模块越多,vite的优势越明显
由于现代浏览器本身就支持ES Module,会自动向依赖的Module发出请求。vite充分利用这一点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像webpack那样进行打包合并。(代码需开启本地服务才能运行,否则会产生跨域错误)
vite是按需加载,webpack是全部加载:在HMR(热更新)方面,当改动了一个模块后,vite仅需让浏览器重新请求该模块即可,不像webpack那样需要把该模块的相关依赖模块全部编译一次,效率更高。
vite的优势在开发环境:当需要打包到生产环境时,vite使用传统的rollup(也可以自己手动安装webpack来)进行打包,因此,vite的主要优势在开发阶段。另外,由于vite利用的是ES Module,因此在代码中(除了vite.config.js里面,这里是node的执行环境)不可以使用CommonJS

Vite脚手架工具
npm init @vitejs/app,直接可以创建vue或者react的项目
运行npm run dev

你可能感兴趣的:(vue.js,前端)