我们已经建立了一个Nuxt / VueJS项目。
Nuxt有自己的配置文件nuxt.config.js
,我们在其中配置webpack和其他构建设置。
在我们的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`
}
}
}