提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具2

前端
2023-03-14 22:54:40 时间

实列1：手动搭建原生 ES Module 开发形式


下面我们先不通过 Vite，而是手动搭建原生 ES Module 开发形式，通过引入 lodash-es 包，实现一个数组去重的小例子，来详细分析一下。


1、新建文件夹 ESM

d79d5b801f604c249d96fe1c40cd0bbe.png



2、初始化前端工程

在文件夹 ESM 里，执行下面命令初始化一个工程

npm init -y


3、安装 lodash-es

lodash 为了良好的浏览器兼容性, 它使用了旧版 es5 的模块语法；而 lodash-es 使用了 es6 的模块语法。

npm i lodash-es -s

796d5da6ea584cba840a4be0cbc8bf74.png


4、编写业务代码

先新建 index.html 文件，里面编写代码：

<!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>手动搭建原生 ES Module 开发形式</title>
</head>
<body>
  <script type="module" src="./main.js"></script>
</body>
</html>


这里记得写 type="module"，不然会报错 Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)

95b66244d8614800a8a0c49c5370dca0.png


然后再新建 main.js 文件，里面编写代码：

import uniq from './node_modules/lodash-es/uniq.js'
const kaimo = [1, 2, 3, 3, 4]
console.log(uniq(kaimo))



5、用 vscode 的 Live Server 启动项目

没有可以安装 vscode，然后在拓展工具添加 Live Server


db118a74cac5420f9d7e6e6acc28b3f7.png



添加完之后，我们启动服务，右击 html 打开 Live Server 或者 Go Live

84abd020e95948fa9dd9bca276e22382.png


启动一个 Web 服务后，会浏览器自动打开。



6、f12 查看结果

我们发现结果正常，重复的 3 被去掉了。


67a1bf329ff84f8ea6a9d86134de310b.png


我们在检测一下网络：我们发现请求竟然有 50 多个。


7d88b5512cbc4eb0a46d666d3c58d3a2.png


那这是为什么？

我们先点开 main.js，发现有一个 import。

2713160f3ef94220a49327c9ab2c2fe8.png


再打开 uniq.js，发现又有一个 import。

7f4c058d0cd24fd8a00e4374d6b707ae.png


再打开 _baseUniq.js，发现又有 6 个 import。

b366a9722f4c414293aa34f2302d1ea9.png


而这种俄罗斯套娃的模式，会一直引用到 uniq.js 相关的所有脚本代码。


可想而知，如果我们太多的模块引入，势必浏览器顶不住。所以这时候 Vite 便引入了 「依赖预构建」 的概念。


实列2：依赖现预构建浅析

下面我们通过 Vite 构建出一个 React 项目，去实现上述逻辑，我们在去观察 Vite 是怎么处理的。


1、生成项目

通过 Vite 指令生成项目

npm init @vitejs/app ESM2 --template react


63bd68faf24e4f0ab2abea52e5fce309.png


2、安装 lodash-es

我们进入 ESM2 文件夹

npm i lodash-es -s


0c2c6c3b965842219cc02e6c4eba6a5a.png

3、修改 main.jsx 代码

import uniq from 'lodash-es/uniq.js'
const kaimo = [1, 2, 3, 3, 4]
console.log(uniq(kaimo))

cfbed73b875748939b7e4844664dfefa.png


4、启动服务查看 f12

执行下面命令

npm run dev


54bd024c370a4b76aa2eab32aa863e3c.png


访问http://localhost:3000/，我们发现结果是正确的：

92e49914040e454d8d1c663fb33b85dc.png

然后我们去看网络部分，我们发现请求资源数少了好多


55f4bbb6acbf46b891bfe4979b828717.png


而 lodash-es/uniq 已经被 Vite 提前预编译到了 .vite 文件夹下


1475c11598f447d0b8db3a78cb199170.png


这样代码中直接去这个文件夹拿现成的包，就不必再递归地去加载很多静态资源脚本。



参考资料


    Vite 官方中文文档

   Vite 和Webpack 的核心差异

   初识 Vite 基础知识

   Module 的语法

   Module 的加载实现



拓展阅读


   强力推荐：ES modules: A cartoon deep-dive

   [Vue官方成员：Vite生态发展的怎么样了

   MDN import

   MDN export







相关文章