Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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`

    }
  }
}
like image 649
asanas Avatar asked Mar 15 '18 14:03

asanas


People also ask

Is Lodash included in Vue?

Using Lodash in VueThe typical way to start using Lodash in your Vue application is to import the needed function on a Vue component basis.

What are Nuxt modules?

Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Let's create a module that uses ngrok to get a Public URL that you can share while working in Development.

Is Nuxt faster than Vue?

Nuxt offers better SEO improvement with its server-side rendering feature, faster development with an auto-generic router, public share features, and management with great configuration options and meta tags methods, automatic code splitting with pre-rendered pages — all of this is impossible or extremely complex to ...


1 Answers

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'.

like image 111
Greaka Avatar answered Oct 16 '22 05:10

Greaka