h5海报模板_html前端模板_黑帽seo之搜索引擎_优化设计六年级上册语文答案

lodash 是前端常用的工具库，其有一个 es 版本 lodash-es，两者的 api 一致，那 lodash-es 相比于 lodash 有什么优势呢？下面通过实验说明两者的区别。

实验

创建实验项目

通过创建一个 Vite + Vue 的项目进行此次实验。

$ pnpm create vite
✔ Project name: … lodash-es-test
✔ Select a framework: › Vue
✔ Select a variant: › JavaScriptScaffolding project in /Users/foolishflyfox/Code/Year2024/Mon10/day12/lodash-es-test...Done. Now run:cd lodash-es-testpnpm installpnpm run dev$ cd lodash-es-test 
$ pnpm i
Packages: +32
++++++++++++++++++++++++++++++++
Progress: resolved 69, reused 32, downloaded 0, added 32, donedependencies:
+ vue 3.5.12devDependencies:
+ @vitejs/plugin-vue 5.1.4
+ vite 5.4.8Done in 7.5s

引入 lodash / lodash-es 测试

通过 pnpm add lodash lodash-es 引入两个包。

原始编译

未使用 lodash 时，编译的情况为:

pnpm build> vite buildvite v5.4.8 building for production...
✓ 16 modules transformed.
dist/index.html                  0.46 kB │ gzip:  0.29 kB
dist/assets/index-BJLh6Aef.css   1.27 kB │ gzip:  0.65 kB
dist/assets/index-Bx4YFdMW.js   60.84 kB │ gzip: 24.57 kB
✓ built in 568ms

调用 lodash 的函数

在 main.js 添加如下代码:

import _ from "lodash";console.log(_.random(0, 100));

通过 pnpm build 进行项目编译:

$ pnpm build> vite buildvite v5.4.8 building for production...
✓ 19 modules transformed.
dist/index.html                   0.46 kB │ gzip:  0.29 kB
dist/assets/index-BJLh6Aef.css    1.27 kB │ gzip:  0.65 kB
dist/assets/index-B7Ld9m_2.js   134.04 kB │ gzip: 51.63 kB
✓ built in 1.03s

可以看到创建的 js 增大了 74kB，编译时间也差不多增加了一倍。

调用 lodash-es 的函数

main.js 中添加的代码改为:

import * as _ from "lodash-es";console.log(_.random(0, 100));

编译结果为:

$ pnpm build> lodash-es-test@0.0.0 build /Users/foolishflyfox/Code/Year2024/Mon10/day12/lodash-es-test
> vite buildvite v5.4.8 building for production...
✓ 656 modules transformed.
dist/index.html                  0.46 kB │ gzip:  0.29 kB
dist/assets/index-BJLh6Aef.css   1.27 kB │ gzip:  0.65 kB
dist/assets/index-DhWitYOy.js   63.46 kB │ gzip: 25.63 kB
✓ built in 1.14s

调用 lodash-es 的多个函数

main.js 中添加的代码修改为：

import * as _ from "lodash-es";console.log(_.random(0, 100));
console.log(_.upperCase("ac"));