vite
文章平均质量分 53
vite服务器
Tina-华灯初上
一个人的成功源于点滴的积累
展开
-
vite build
vite在开发阶段采用的是按需加载的方式,不会将所有文件打包。但是生产环境的部署是需要进行打包的,这里它使用的是rollup打包方式。对于代码切割的需求,使用原生动态导入,因此打包后支持新浏览器,对IE的兼容性不是很好,但是可以用对应的polyfill解决。使用esbuild来处理需要pre-undle的在cli.ts的build命令中引入build.ts调用doBuild方法,在这个方法中配置打包参数(input output plugin等)调用buildHtmlPlugin解析文件入口in原创 2021-10-19 17:44:14 · 4308 阅读 · 0 评论 -
vite devServer
简介viteDevServer是整个vite运行的核心,下面我们来简单熟悉一下它的运行机制。首先分析一下组成:它是由5大模块和15大中间件组成的5大模块httpServerfsWatcherpluginContainerwebSocketServermoduleGraph15大中间件(按顺序执行)timeMiddlewarecorsMiddlewareproxyMiddlewarebaseMiddlewarelaunchEditorMiddlewareviteHMRPing原创 2021-10-19 17:43:29 · 2558 阅读 · 0 评论 -
vite 按需编译
vite不同于webpack,不会将文件打包,而是按需实时加载我们在index.html中设置,这样浏览器就会向服务器发送get请求来加载main.js,如果main中含有import,则会再次发送请求获取文件。vite的作用就是劫持浏览器的这些请求,在后台进行处理,将文件进行简单的分解整合,再返回给浏览器。// 创建server时,先配置文件路径解析方式const config = await resolveConfig(inlineConfig, 'serve', 'development')原创 2021-10-19 14:28:03 · 1010 阅读 · 0 评论 -
Vite HMR
传统webpack的hmr是使用webpack的HotModuleReplacementPlugin,而vite则是采用native ES Module的devServer。初始化本地服务器加载并运行对应的plugin最重要的一件事就是运行plugin,目前vite支持的plugin大体如下图所示...原创 2021-10-13 10:32:20 · 1019 阅读 · 0 评论 -
vite简介
概念vite是面向现代浏览器的web应用开发工具(它主要服务于vue3项目)由于浏览器开始原生支持ES模块,越来越多的javascript工具使用编译型语言编写,而vite的出现就是为了解决webpack在开发阶段使用webpack-dev-server启动时冷却时间过长以及在热更新时使用webpack-hmr反应较慢问题vite项目的依赖:@vue/compiler-sfc(用于编译.vue文件)Vite(命令行)基础使用vite server1、启动时使用vite serve,此原创 2021-10-11 11:17:53 · 915 阅读 · 0 评论