微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

vite概念和设计思想

vite概念和设计思想

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

esm和webpack的对比

在html以module(esm)的方式引入js模块

在这里插入图片描述

在html项目中引入第三方lodash-es库,yarn add lodash-es,然后使用:
(如何找到入口文件:node_modules/库名/package.json的main字段就是入口文件

在这里插入图片描述

在这里插入图片描述

引入lodash.js的时候把其他模块引入了,其他模块又依赖更多的其他模块,所以导致指向首页lodash的filter函数结果引入了一大堆,这对程序员开发来说无法接受。而vite不是这样的:

比如yarn create vite创建vite项目,
然后yarn add lodash-es
然后yarn dev启动项目

在这里插入图片描述

引入lodash-es

在这里插入图片描述


在这里插入图片描述

vite和CRA(create-react-app)对比

首先创建react项目

在这里插入图片描述

cra创建react项目花了3分12秒

在这里插入图片描述

用vite花了43秒

在这里插入图片描述

结论

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐