我们如何在 Nuxt?Vuejs 项目中仅包含来自 lodash 的必需模块？

Posted 2023-02-22

【中文标题】我们如何在 Nuxt?Vuejs 项目中仅包含来自 lodash 的必需模块？

【英文标题】：How do we include only required modules from lodash in a Nuxt?Vuejs Project?

【发布时间】：2018-08-24 09:16:05

【问题描述】：

我们已经构建了一个 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', s-s-r: 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`

    
  

【问题讨论】：

也许供应商列表告诉 webpack 包含整个包。如果将其从供应商列表中删除，是否会出现导入错误？

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

如果您尝试像 import orderBy from 'lodash' 这样的全局引用会怎样。 WebPack 2 及更高版本只会导入单个函数。您不必定义函数的路径。

从供应商中删除 lodash 仍然可以在 vendor.js 中得到它，可能是因为这个 - 在 Nuxt 中，当一个模块在 node_modules 中时，它会被提取到供应商块中，并在至少 1/2 的总页数。

旁注：我强烈建议从moment 切换到date-fns 以减小文件大小。

【参考方案1】：

你可以npm install只需要需要的包

Lodash 可以按custom builds 拆分。您可以找到已经可用的列表here。您可以像这样使用它们：npm i -S lodash.orderby。我没有检查它，但您可能还需要将 import orderBy from 'lodash/orderBy' 更改为 import orderBy from 'lodash.orderby'。

【讨论】：

我们确实使用 lodash cli 进行了自定义构建，并且仅在构建中加载了我们想要的包。包现在小了很多。

你也可以通过 tree-shaking 实现更小的尺寸，但 npm 安装每个功能的麻烦更少

@Claudiu 你能给出一个答案来说明这是怎么做到的吗？