2023 开发一分钟，性能一整年：Taro项目中 lodash 的按需加载

作为一名以lodash为生命的前端开发者，在最近的项目中发现lodash竟然不会被tree shaking。这使我陷入深深的疑惑之中。经过一番追查，我发现问题出在了Taro的webpack配置上，它不会对es6模块进行tree shaking。这导致lodash总是被全局打包+编译，严重影响了项目的生产(打包)性能和开发(编译)效率。为了解决这个问题，我们引入lodash的按需加载方案。

lodash的按需加载，就是根据需要动态加载所需的lodash模块。具体实现方法是在代码中使用import语句动态加载lodash模块。例如：

import _ from 'lodash';
_.debounce(() => {}, 100);

这样，只有在需要使用lodash的debounce函数时，才会加载lodash模块。这将大大减少lodash对项目性能的影响。

以下是lodash按需加载的具体步骤：

1. 在项目中安装lodash-es模块。
2. 在代码中使用import语句动态加载lodash模块。
3. 在webpack配置中开启tree shaking。
4. 在Taro框架中配置按需加载选项。

为了让各位读者能够更直观地理解如何实现lodash的按需加载，我将提供一个更详细的示例：

// 在项目中安装lodash-es模块
npm install lodash-es --save

// 在代码中使用import语句动态加载lodash模块
import {debounce} from 'lodash-es';

// 在webpack配置中开启tree shaking
module.exports = {
  //...其他配置
  optimization: {
    usedExports: true,
  },
};

// 在Taro框架中配置按需加载选项
module.exports = {
  //...其他配置
  h5: {
    output: {
      publicPath: '/static/',
    },
  },
  webpackChain(chain, webpack) {
    chain.plugin('esbuild').use(EsbuildPlugin, [
      {
        target: 'es2015', // or 'es2018' or 'es2020'
        loaders: {
          '.js': 'jsx',
        },
      },
    ]);
  },
};

通过这些步骤，我们就可以在Taro项目中实现lodash的按需加载，从而提高项目的性能。

在本文中，我们讨论了如何使用Taro框架实现lodash的按需加载，以提高您的项目性能。我们提供了详细的步骤和示例，帮助您轻松实现lodash的按需加载。希望本文对您有所帮助。