LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

10分钟了解一下最近很火的vue打包工具Vite

admin
2024年4月3日 10:18 本文热度 21

Vite 是 vue的作者尤雨溪开发的打包工具,目前亮点是本地开发时热加载编译极快,在大型项目中体验较好。

贴一下作者微博原话:

Vite,一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。同时不仅有 Vue 文件支持,还搞定了热更新,而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。虽然现在还比较粗糙,但这个方向我觉得是有潜力的,做得好可以彻底解决改一行代码等半天热更新的问题。

从上面可以看出:

  • Vite 主要对应的场景是开发模式,跳过打包按需加载,因此热更新的速度非常快;

  • 在大型项目上可以有效提高本地开发编译打包的速度,解决 “改一行代码等半天” 问题;

  • 浏览器解析 imports,利用了 type=“module” 功能,然后拦截浏览器发出的 ES imports 请求并做相应处理;

  • 生产模式是用 rollup 打包,这里后续应该会做优化;

一、现代浏览器的模块功能

script标签的type属性设置为module,那么在js中就可以使用模块功能(import '**.js'),es6兼容性为IE11及以下不支持,从 Vue3 的 proxy 和 Vite 的模块,可以看出尤大是彻底放弃 IE 了。

二、拦截http请求

针对不同类型的文件做不同的处理

  1. js文件 用 es-module-lexer 来对 js 进行的语法分析获取 imports 数组(依赖分析),然后将import语法替换为请求对应的js文件。

原代码:

转换后:

2. vue文件

vue单文件组件包含的三个部分 template、script、style, Vite 会将单文件组件分成三个部分分别请求,以及做相应处理。

2.1 template

Vite 将 template 编译成 render 函数后返回。

2.2 script

分析 js 中的 import 依赖,重新发起请求。

2.3 style

将 style 编译成 css 插入head中。原本的 App.vue 文件是:

<template>

    <h1>Hello Vite + Vue 3!</h1>

    <p>Edit ./App.vue to test hot module replacement (HMR).</p>

    <p><span>Count is: {{ count }}</span> <button @click="count++">increment</button></p>

</template>

<script>

    export default { data: () => ({ count: 0 }) };

</script>

<style scoped>

    h1 {

        color: #4fc08d;

    }

    h1,

    p {

        font-family: Arial, Helvetica, sans-serif;

    }

</style>

转换后变成了:

三、热更新

Vite 的是通过 WebSocket 来实现热更新通信,当代码改动以后,通过 websocket 仅向浏览器推送改动的文件。因此 Vite 本地热更新的速度不会受项目的大小影响太多,在大型项目中本地开发速度快。Vite 的客户端热更新代码是在 app.vue 文件编译过程中,将代码注入进去的。

四、Vite 和 vue-cli 的优缺点对比

五、小结 目前 Vite 正在以很快的速度迭代着,优化自身的功能,未来可期。

>原文:https://juejin.cn/post/6928175048163491848


该文章在 2024/4/3 11:10:23 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved