title: How do we include only required modules from lodash in a Nuxt?Vuejs Project?
body: <p>We have built a Nuxt/VueJS project. </p>
  
  <p>Nuxt has its own config file called <code>nuxt.config.js</code> within which we configure webpack and other build setup.</p>
  
  <p>In our package.json, we have included the lodash package.</p>
  
  <p>In our code, we have been careful to load only import what we require, for example:</p>
  
  <pre><code>import orderBy from 'lodash/orderBy'
  </code></pre>
  
  <p>In <code>nuxt.config.js</code>, lodash is add to the <code>vendor</code> list.</p>
  
  <p>However when we create the build, webpack always includes the entire <code>lodash</code> library instead of including only what we have used in our code.</p>
  
  <p>I have read numerous tutorials but haven't got the answer. Some of those answers will surely work if it was a webpack only project. But in our case, it is through nuxt config file.</p>
  
  <p>Looking forward to some help.</p>
  
  <p>Below is the partial nuxt.config.js file. Only relevant/important parts are included:</p>
  
  <pre><code>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`
  
      }
    }
  }
  </code></pre>