如何优化 Vite 项目中的 Lodash 引入：从 Tree Shaking 到自动化测试

文章目录

• 前言
• • 问题背景
  • • 解决方案概述
    • 思路 1：使用 Lodash-ES 替代 Lodash
    • 思路 2：使用 Babel 插件 babel-plugin-lodash
    • 思路 3：大规模替换后的验证与测试
    • Babel 的工作流程回顾
    • 最终选择及实践经验
    • 自动化测试：使用 Puppeteer 验证替换后的代码
    • 结论

前言

在现代前端开发中，优化代码的体积和构建速度是非常重要的。特别是在使用 Vite 作为构建工具时，如何正确地处理 Lodash 这种通用的工具库，变得尤为关键。在本文中，我将分享我们如何在 Vite 项目中优化 Lodash 的引入方式，并确保优化后的代码能够正常运行。

问题背景

在项目中，我们经常使用 Lodash 提供的各种实用函数。传统的方式是直接使用 import _ from 'lodash' 来引入整个 Lodash 库。然而，这种方式有几个明显的问题：

1. 冗余模块加载：由于 import _ from 'lodash' 会加载整个库，即使我们只用了其中的几个函数，整个库的所有模块都会被加载。

2. Tree Shaking 无效：Lodash 使用的是 CommonJS 模块系统，而 Vite 的 Tree Shaking 依赖于 ES Module（ESM）的静态分析。因此，Vite 无法有效地在构建时剔除未使用的 Lodash 模块。

解决方案概述

我们分析了几个优化 Lodash 引入方式的解决方案，并最终决定采用更适合我们项目需求的方案。

思路 1：使用 Lodash-ES 替代 Lodash

Lodash-ES 是一个 ES Module 版本的 Lodash，可以很好地与 Vite 的 Tree Shaking 配合。使用 lodash-es 可以确保未使用的模块在构建时被有效地剔除。

操作步骤：

1. 安装 Lodash-ES：

   • 在项目中安装 lodash-es，以替代传统的 lodash。

   npm install lodash-es
   

2. 全局替换 import _ from 'lodash' 为 import { functionName } from 'lodash-es'：

   • 逐步将项目中的 import _ from 'lodash' 替换为按需引入的 lodash-es 版本。
   • 示例代码：

   // 原始代码
   import _ from 'lodash';
   
   const data = [1, 2, 3];
   const result = _.map(data, (item) => item * 2);
   
   // 替换后的代码
   import {
         map } from 'lodash-es';
   
   const data = [1, 2, 3];
   const result = map(data, (item) => item * 2);
   

3. 批量替换工具：

   • 可以使用 VSCode 的全局搜索和替换功能