Javascript 我们如何在Nuxt？Vuejs项目中只包含lodash中所需的模块？

我们已经构建了一个Nuxt/VueJS项目

Nuxt有自己的配置文件，名为

Nuxt.config.js

，我们在其中配置webpack和其他构建设置

在我们的package.json中，我们包含了lodash包

在我们的代码中，我们小心地只加载导入我们需要的内容，例如：

import orderBy from 'lodash/orderBy'

在

numxt.config.js

中，lodash被添加到

供应商

列表中

然而，当我们创建构建时，webpack总是包含整个

lodash

库，而不是只包含我们在代码中使用的内容

我读了很多教程，但还没有找到答案。如果只是一个网页项目，其中一些答案肯定会奏效。但在我们的例子中，它是通过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`

    }
  }
}

---

您可以

npm仅安装所需的软件包

矿粉可按比例分解。您可以找到一个已经可用的列表。您可以这样使用它们：
npmi-S lodash.orderby
。我没有检查它，但您可能还需要将
导入orderBy从'lodash/orderBy'
更改为
导入orderBy从'lodash.orderBy'
可能供应商列表告诉webpack包含整个软件包。如果将其从供应商列表中删除，是否会出现导入错误？@cgTag I刚刚将其从供应商列表中删除。没有错误，但也没有变化。完整的lodash仍然是供应商捆绑包的一部分。如果您尝试像这样的全局引用，
import orderBy from'lodash'
，该怎么办。WebPack 2及以上版本将仅导入单个功能。您不必定义函数的路径。从vendor中删除lodash仍然可以在vendor.js中获得它，可能是因为-in Nuxt，当模块位于node_模块内时，它会被提取到供应商区块中，并在至少1/2的总页面中使用。旁注：我强烈建议从
moment
切换到
date fns
，以减小文件大小。我们确实使用lodash cli进行了自定义构建，并且只加载了构建中需要的包。软件包现在小得多了。你也可以通过摇树来实现更小的尺寸，但是安装每一个npm的麻烦更少了function@Claudiu你能给出一个答案来说明这是如何做到的吗？