How do we include only required modules from lodash in a Nuxt?Vuejs Project?

Question

We have built a Nuxt/VueJS project.

Nuxt has its own config file called nuxt.config.js within which we configure webpack and other build setup.

In our package.json, we have included the lodash package.

In our code, we have been careful to load only import what we require, for example:

import orderBy from 'lodash/orderBy'

In nuxt.config.js, lodash is add to the vendor list.

However when we create the build, webpack always includes the entire lodash library instead of including only what we have used in our code.

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.

Looking forward to some help.

Below is the partial nuxt.config.js file. Only relevant/important parts are included:

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`

    }
  }
}

Solution

You can npm install only the required packages

Lodash can be split up per custom builds. You can find a list of already available ones here. You can use them like this: npm i -S lodash.orderby. I didn't check it but you would probably also need to change import orderBy from 'lodash/orderBy' to import orderBy from 'lodash.orderby'.