按需加载

这里我们用 loadsh 作为例子，不同的引入方式会导致打包出来的体积不一样

我们采用 vite 的项目来举例说明

• 使用 vite 脚手架创建一个项目
• 使用 vite-bundle-visualizer 来分析打包后的体积

使用方式

全部引用

安装

pnpm run loadsh

引用方式

// App.vue 中 
import * as _ from "loadsh"; 
console.log(_.add(1, 2));

分析

安装 vite-bundle-visualizer

pnpm run vite-bundle-visualizer

在根目录下执行

npx vite-bundle-visualizer

可以看到，这里把 loadsh 全都引入了进来，体积有 527 KB

按需引入

安装

pnpm run loadsh

引用方式

我们不要傻乎乎去把所有的都引入进来，我们引入我们需要的方法就可以了

// App.vue 中 
import add from "loadsh/add"; 
console.log(add(1, 2));

分析

这里变成了8KB左右

无论是 Webpack 还是 vite 生产环境中使用的 Rollup，在打包构建的时候都会去解析模块，如果你使用的是 loadsh 而不是更精准的 loadsh/add ,它就会打包整个 loadsh 而不是 loadsh/add 这个模块。模块的一般的单位是 js 文件，你可以看到 loadsh 构建出来的是存在 add 这个 js 的，所以我们可以直接引用

当我们自己写代码的时候，写一整个的工具库，所有的方法都放在一个 js 文件中，那就巧妇难成无米之炊

如果你觉得这样写太难受了，可以使用插件 lodash-webpack-plugin 和 babel-plugin-lodash，本质上也是替换路径，只不过把手动书写变成了自动化

使用模块的Tree-shaking

我们这里使用 loadsh-es

安装

pnpm run loadsh-es

引用方式

我们不要傻乎乎去把所有的都引入进来，我们引入我们需要的方法就可以了

// App.vue 中 
import { add } from "lodash-es"; 
console.log(add(1, 2));

分析

这里的模块也小了，只有7KB左右

这个和上面的按需引入的原理就不太一样了，这里是使用了 ESModule 的方式，在构建的时候进行了 Tree-shaking，把一些不需要的代码给去除了

总结

看上去按需引入和后面的es模块引入差不多，但是实际上还是有区别的