Commit 67070e51 authored by zhangfangli's avatar zhangfangli

浅谈vite

parent 1c1dbda0
---
title: 浅谈vite
date: 2022/5/25 15:00:00
title: 浅谈Vite
date: 2022/5/2515:00:00
tags:
- vite
- package.json
......@@ -34,9 +34,11 @@ Vite是一个由原生 ES Module 驱动的 Web 开发前端构建工具,它能
1. **打包和速度:**
webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染。首先分析各个模块之间的依赖,然后进行打包,在启动webpack-dev-server,请求服务器时,直接显示打包结果。webpack打包之后存在的问题:随着模块的增多,会造成打出的 bundle 体积过大,进而会造成热更新速度明显拖慢。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1649906843938-e3f48703-d829-4552-8f60-94e9f6eda148.png#clientId=u66ceec79-db7d-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u271aea00&margin=%5Bobject%20Object%5D&name=image.png&originHeight=913&originWidth=1920&originalType=url&ratio=1&rotation=0&showTitle=false&size=144825&status=done&style=shadow&taskId=u69c1edc9-52b2-4ffe-bccf-ddae1305f22&title=)
webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染。首先分析各个模块之间的依赖,然后进行打包,在启动webpack-dev-server,请求服务器时,直接显示打包结果。webpack打包之后存在的问题:随着模块的增多,会造成打出的 bundle 体积过大,进而会造成热更新速度明显拖慢。<br />
![webpack](/yifu-study-front-share/images/viteImg/webpack.png)
vite: 启动服务器=> 请求模块时按需动态编译显示。是先启动开发服务器,请求某个模块时再对该模块进行实时编译,因为现代游览器本身支持ES-Module,所以会自动向依赖的Module发出请求。所以vite就将开发环境下的模块文件作为浏览器的执行文件,而不是像webpack进行打包后交给本地服务器。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1649906852732-e8b0df7d-cf10-4b82-b97c-755ae7cc32ec.png#clientId=u66ceec79-db7d-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u03b35c54&margin=%5Bobject%20Object%5D&name=image.png&originHeight=960&originWidth=1920&originalType=url&ratio=1&rotation=0&showTitle=false&size=155796&status=done&style=shadow&taskId=u4bf869fb-ed51-4bf9-8a67-0911a7031f8&title=)
vite: 启动服务器=> 请求模块时按需动态编译显示。是先启动开发服务器,请求某个模块时再对该模块进行实时编译,因为现代游览器本身支持ES-Module,所以会自动向依赖的Module发出请求。所以vite就将开发环境下的模块文件作为浏览器的执行文件,而不是像webpack进行打包后交给本地服务器。<br />
![vite](/yifu-study-front-share/images/viteImg/vite1.png)
2. **工具定位:**
......@@ -52,8 +54,22 @@ webpack:是偏底层的东西,进行配置化,灵活度极高的工具,具
## 2.2 Esm 加载对比
1. esm 文件中,创建index.js , 引入main.js
![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1653447450005-2b833bbf-8fb2-468d-b5d8-2e4cb55834d7.png#clientId=ud79621cb-ae54-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=351&id=u5f31b6be&margin=%5Bobject%20Object%5D&name=image.png&originHeight=351&originWidth=1151&originalType=binary&ratio=1&rotation=0&showTitle=false&size=36241&status=done&style=shadow&taskId=uabd2980f-3412-415a-89f5-2601c926139&title=&width=1151)
```jsx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESM Brower</title>
<!-- type module -->
<script src="main.js" type="module"></script>
</head>
<body>
</body>
</html>
```
2. 安装 lodash的包
......@@ -77,11 +93,12 @@ import { filter } from './node_modules/lodash-es/lodash.js'
4. 利用**Live Server** 插件,项目启动
![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1653449009035-6bb482eb-f7ed-4999-b01f-9f48e90598ac.png#clientId=ud79621cb-ae54-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=359&id=u9dbcb02e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=359&originWidth=395&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18817&status=done&style=shadow&taskId=ub8e9c570-f0c9-4a5f-84f5-35e47bbaed1&title=&width=395)
![live server启动](/yifu-study-front-share/images/viteImg/vite2.png)
5. 我们能看到打印出来的东西:
![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1653449056058-c7481993-8ec8-4a14-bcce-42ca5f029251.png#clientId=ud79621cb-ae54-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=152&id=u7ef73e3e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=152&originWidth=304&originalType=binary&ratio=1&rotation=0&showTitle=false&size=6955&status=done&style=shadow&taskId=u1eacf5f9-d6a1-4f7d-b2e5-f34ebfc6a31&title=&width=304)<br />以及请求的情况<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1653449948119-5bef0b66-a27b-4ddd-a5a3-4e54b3e07cee.png#clientId=ud79621cb-ae54-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=643&id=uf35290e3&margin=%5Bobject%20Object%5D&name=image.png&originHeight=643&originWidth=621&originalType=binary&ratio=1&rotation=0&showTitle=false&size=74073&status=done&style=shadow&taskId=u60c4ce1a-29d6-49da-917a-faf75213317&title=&width=621)<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1653450060455-1649ff6b-03fc-4a63-93eb-3f4bd0329518.png#clientId=ud79621cb-ae54-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=38&id=u65eefacd&margin=%5Bobject%20Object%5D&name=image.png&originHeight=38&originWidth=633&originalType=binary&ratio=1&rotation=0&showTitle=false&size=4527&status=done&style=shadow&taskId=ufc4deede-5ea2-4e1d-85e0-e3839921966&title=&width=633)<br />从上面看到只是用到了一个过滤但是其他的模块等也都进行了请求,浪费了时间
![打印1](/yifu-study-front-share/images/viteImg/vite3.png)<br />![打印2](/yifu-study-front-share/images/viteImg/vite4.png)<br />![打印2](/yifu-study-front-share/images/viteImg/vite5.png)
<br />从上面看到只是用到了一个过滤但是其他的模块等也都进行了请求,浪费了时间
**vite是怎么做的呢?**
......@@ -104,7 +121,7 @@ console.log(newArr);
4. yarn dev 后,页面中看到
![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1653449853100-19c6cc19-f6d0-4eca-a1a0-787d8557adb9.png#clientId=ud79621cb-ae54-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=151&id=u180269b3&margin=%5Bobject%20Object%5D&name=image.png&originHeight=151&originWidth=430&originalType=binary&ratio=1&rotation=0&showTitle=false&size=8151&status=done&style=shadow&taskId=uc65bec13-9284-4300-948b-1ce3cf5cb58&title=&width=430)<br />以及请求情况<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1653449905941-940af26d-1daa-4e4a-9b0a-34ca48ce5130.png#clientId=ud79621cb-ae54-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=260&id=u7ee1fd55&margin=%5Bobject%20Object%5D&name=image.png&originHeight=260&originWidth=563&originalType=binary&ratio=1&rotation=0&showTitle=false&size=24024&status=done&style=shadow&taskId=u8f373007-a4ca-4293-a3d6-d774a0c5210&title=&width=563)<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1653450092822-a66700d0-75af-4539-8200-7cf559f57718.png#clientId=ud79621cb-ae54-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=38&id=uc8232047&margin=%5Bobject%20Object%5D&name=image.png&originHeight=38&originWidth=615&originalType=binary&ratio=1&rotation=0&showTitle=false&size=4295&status=done&style=shadow&taskId=ue1c6145a-f58b-4a55-b62a-2be17c87de0&title=&width=615)<br />对比之下可以看到,页面清爽了很多,很多没有必要的请求也没有了。
![打印3](/yifu-study-front-share/images/viteImg/vite6.png)<br />![打印4](/yifu-study-front-share/images/viteImg/vite7.png)<br />对比之下可以看到,页面清爽了很多,很多没有必要的请求也没有了。
<a name="vXvPP"></a>
# 3. vite 的使用
> Vite 需要 [Node.js](https://nodejs.org/en/) 版本 >= 12.0.0。
......@@ -143,7 +160,7 @@ vite中还会有一些模板可以选择,指定的所有相关项目模板都
<a name="z548o"></a>
## 3.1 遇到的问题
控制台会显示 user --host to expose(使用 --host 暴露网络) <br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1649918916965-18facd57-edcd-4802-86ce-c93bb1eef370.png#clientId=u66ceec79-db7d-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=141&id=ud7f8d36a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=127&originWidth=399&originalType=binary&ratio=1&rotation=0&showTitle=false&size=6185&status=done&style=shadow&taskId=ua767c17e-be36-4279-930f-444bb45e8dc&title=&width=443.33334507765625)<br />解决方法:
控制台会显示 user --host to expose(使用 --host 暴露网络) <br />![host问题](/yifu-study-front-share/images/viteImg/vite8.png)<br />解决方法:
1. 在根目录下的 vite.config.js 文件中添加以下内容
```jsx
......@@ -345,7 +362,7 @@ VITE_APP_BASEAPI="https://www.production.com"
# 4. npm init vite@latest做了什么?
<a name="HsCxP"></a>
## 4.1 npm init
npm init :初始化一个简单的package.json文件,执行该命令后终端会依次询问 name, version, description 等字段<br />查询[文档](https://docs.npmjs.com/cli/v7/commands/npm-init)得知:<br />`**npm init <initializer>**`**:**can be used to set up a new or existing npm package.(可以用来建立一个新的或现有的NPM包)
npm init :初始化一个简单的package.json文件,执行该命令后终端会依次询问 name, version, description 等字段<br />查询[文档](https://docs.npmjs.com/cli/v7/commands/npm-init)得知:<br />**npm init <initializer>:**can be used to set up a new or existing npm package.(可以用来建立一个新的或现有的NPM包)
<a name="oLGN9"></a>
## 4.2 npm init <initializer>
initializer in this case is an npm package named create-<initializer>, which will be installed by [npm-exec](https://docs.npmjs.com/cli/v7/commands/npm-exec), and then have its main bin executed -- presumably creating or updating package.json and running any other initialization-related operations.<br />(initializer 在这种情况下是一个名为 create-<initializer> 的 npm 包,这个包将由 [npm-exec](https://link.juejin.cn?target=https%3A%2F%2Fdocs.npmjs.com%2Fcli%2Fv7%2Fcommands%2Fnpm-exec)(也就是 **npx**) 来安装,然后执行 package.json 中 bin 属性对应的脚本,运行任何其他与初始化相关的操作。
......@@ -359,11 +376,11 @@ init命令转化为对应的npm exec操作如下:
由上面得知:<br />npm init vite@latest => npx create-vite
<a name="ExHkk"></a>
## 4.3 查询create-vite
通过 [npmjs.com](https://link.juejin.cn/?target=http%3A%2F%2Fnpmjs.com) 查找 create-vite 或在 Vite 源代码中的 [packages](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fvitejs%2Fvite%2Ftree%2Fmain%2Fpackages) 文件夹(如下图)中可以看到有 [create-vite](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fvitejs%2Fvite%2Ftree%2Fmain%2Fpackages%2Fcreate-vite)<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1652066071695-270ef119-cd3e-4759-99f1-ff72cb0ff793.png#clientId=u1fadd584-440f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=429&id=u91adb811&margin=%5Bobject%20Object%5D&name=image.png&originHeight=429&originWidth=871&originalType=binary&ratio=1&rotation=0&showTitle=false&size=42372&status=done&style=shadow&taskId=u7d18ef8c-0a6e-41a8-9cfa-94b1cfce5ab&title=&width=871)<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1652066166077-54469a02-4af5-4cb1-8c3e-77f639caa777.png#clientId=u1fadd584-440f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=824&id=ue4178843&margin=%5Bobject%20Object%5D&name=image.png&originHeight=824&originWidth=783&originalType=binary&ratio=1&rotation=0&showTitle=false&size=70791&status=done&style=shadow&taskId=u9a62ff18-3905-428e-aa4b-94d3e5791fc&title=&width=783)<br />查看在 create-vite 文件夹下的 package.json 中发现 [bin 入口](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fvitejs%2Fvite%2Fblob%2Fmain%2Fpackages%2Fcreate-vite%2Fpackage.json%23L7)<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1652066220280-96132ee8-2dfe-421c-8645-7505d6acbd8c.png#clientId=u1fadd584-440f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=861&id=uc98f3c46&margin=%5Bobject%20Object%5D&name=image.png&originHeight=861&originWidth=739&originalType=binary&ratio=1&rotation=0&showTitle=false&size=65541&status=done&style=shadow&taskId=u06c77076-ea95-4fce-ae35-99b3155a3a7&title=&width=739)
通过 [npmjs.com](https://link.juejin.cn/?target=http%3A%2F%2Fnpmjs.com) 查找 create-vite 或在 Vite 源代码中的 [packages](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fvitejs%2Fvite%2Ftree%2Fmain%2Fpackages) 文件夹(如下图)中可以看到有 [create-vite](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fvitejs%2Fvite%2Ftree%2Fmain%2Fpackages%2Fcreate-vite)
<br />![create-vite1](/yifu-study-front-share/images/viteImg/vite9.png)
<br />![create-vite2](/yifu-study-front-share/images/viteImg/vite10.png)
<br />查看在 create-vite 文件夹下的 package.json 中发现 [bin 入口](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fvitejs%2Fvite%2Fblob%2Fmain%2Fpackages%2Fcreate-vite%2Fpackage.json%23L7)
<br />![create-vite3](/yifu-study-front-share/images/viteImg/vite11.png)
<a name="OVWEq"></a>
#
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment