web-dev-qa-db-fra.com

Comment inclure uniquement les modules requis de lodash dans un projet Nuxt? Vuejs?

Nous avons construit un projet Nuxt/VueJS.

Nuxt a son propre fichier de configuration appelé nuxt.config.js dans lequel nous configurons le webpack et les autres configurations de build.

Dans notre package.json, nous avons inclus le package lodash.

Dans notre code, nous avons pris soin de ne charger que l'importation de ce dont nous avons besoin, par exemple:

import orderBy from 'lodash/orderBy'

Dans nuxt.config.js, lodash est ajouté à la liste vendor.

Cependant, lorsque nous créons la build, webpack inclut toujours la bibliothèque lodash entière au lieu d'inclure uniquement ce que nous avons utilisé dans notre code.

J'ai lu de nombreux tutoriels mais je n'ai pas la réponse. Certaines de ces réponses fonctionneront sûrement s'il s'agissait d'un projet Webpack uniquement. Mais dans notre cas, c'est via le fichier de configuration nuxt.

Dans l'attente d'une aide.

Vous trouverez ci-dessous le fichier partiel nuxt.config.js. Seules les pièces pertinentes/importantes sont incluses:

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`

    }
  }
}
javascriptwebpackvue.jslodashnuxt.js
11
asanas

Vous pouvez npm install uniquement les packages requis

Lodash peut être divisé par versions personnalisées . Vous pouvez trouver une liste de ceux déjà disponibles ici . Vous pouvez les utiliser comme ceci: npm i -S lodash.orderby. Je ne l'ai pas vérifié, mais vous devrez probablement également modifier import orderBy from 'lodash/orderBy' à import orderBy from 'lodash.orderby'.

6
Greaka