我们如何在Nuxt?Vuejs项目中仅包含lodash中所需的模块?

JavaScript Vue.js

卡卡西Near

2020-03-20

我们已经建立了一个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`

    }
  }
}

第2542篇《我们如何在Nuxt?Vuejs项目中仅包含lodash中所需的模块?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android