如何在 Nuxt.js + Vue.js 项目中仅引入所需的 Lodash 模块？

Question

我们已经建立了一个 Nuxt/VueJS 项目。Nuxt 有自己的配置文件，叫做 nuxt.config.js，在其中我们可以配置 webpack 和其他构建设置。

在 package.json 中，我们已经包含了 lodash 包。

在我们的代码中，我们仅加载所需的模块，例如：

import orderBy from 'lodash/orderBy'

在 nuxt.config.js 文件中，lodash 被添加到 vendor 列表中。

然而，当我们创建构建时，webpack 总是包含整个 lodash 库，而不仅仅包括我们在代码中所使用的部分。

我已经阅读了许多教程，但没有得到答案。其中一些答案在一个只使用 webpack 的项目中肯定有效。但在我们的情况下，通过 nuxt 配置文件实现。

期待一些帮助。

下面是部分 nuxt.config.js 文件。 只包括相关/重要部分：

const resolve = require('resolve')
const webpack = require('webpack')

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
  },
  modules: [
    ['@nuxtjs/component-cache', { maxAge: 1000 * 60 * 10 }]
  ],
  plugins: [
    { src: '~/plugins/intersection', ssr: false },
  ],
  build: {
    vendor: ['moment', 'lodash'],
    analyze: {
      analyzerMode: 'static'
    },
    postcss: {
      plugins: {
        'postcss-custom-properties': false
      }
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ],
    /*
    ** Run ESLINT on save
    */
    extend (config, ctx) {
      // config.resolve.alias['create-api'] = `./create-api-${ctx.isClient ? 'client' : 'server'}.js`

    }
  }
}

- asanas

---

如果供应商列表告诉webpack包括整个软件包，那么您会得到导入错误吗？如果从供应商列表中删除它，您是否会收到导入错误？ - Reactgular

@cgTag 我刚从供应商列表中将其删除。没有错误，但也没有任何变化。完整的lodash仍然是供应商捆绑包的一部分。 - asanas

如果你像这样尝试全局引用import orderBy from 'lodash'，那么WebPack 2及以上版本只会导入单个函数。而且你不需要定义到函数的路径。 - Reactgular

从vendor中删除lodash，但仍然在vendor.js中，可能是因为在Nuxt中，当一个模块在node_modules中并且在至少一半的总页面中使用时，它会被提取到vendor块中。 - asanas

附注：我强烈建议您也切换到date-fns，以减小文件大小。 - ProblemsOfSumit

Answer 1

您只需要安装所需的包，可以使用npm install

Lodash可以按照自定义构建进行拆分。您可以在此处找到已经可用的列表。您可以这样使用它们：npm i -S lodash.orderby。我没有检查过，但是您很可能还需要将import orderBy from 'lodash/orderBy'更改为import orderBy from 'lodash.orderby'。

- Greaka

---

我们使用 Lodash CLI 进行了自定义构建，并仅加载我们所需的软件包。现在软件包体积小多了。 - asanas

你也可以通过树摇来实现更小的体积，但不需要安装每个函数的 npm 包。 - Claudiu

@Claudiu，你能给出一个示例来展示如何完成吗？ - Bhaskar