我们已经建立了一个 Nuxt/VueJS 项目。Nuxt 有自己的配置文件,叫做 nuxt.config.js,在其中我们可以配置 webpack 和其他构建设置。
在 package.json 中,我们已经包含了 lodash 包。
在我们的代码中,我们仅加载所需的模块,例如:
然而,当我们创建构建时,webpack 总是包含整个
我已经阅读了许多教程,但没有得到答案。其中一些答案在一个只使用 webpack 的项目中肯定有效。但在我们的情况下,通过 nuxt 配置文件实现。
期待一些帮助。
下面是部分 nuxt.config.js 文件。 只包括相关/重要部分:
在 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`
}
}
}
import orderBy from 'lodash'
,那么WebPack 2及以上版本只会导入单个函数。而且你不需要定义到函数的路径。 - Reactgulardate-fns
,以减小文件大小。 - ProblemsOfSumit