我们已经建立了一个Nuxt/VueJS项目.
Nuxt有自己的名为nuxt.config.js
的配置文件,我们在其中配置webpack和其他构建设置.
在我们的包裹里.json,我们已经包含了lodash包.
在我们的代码中,我们一直小心地只加载导入我们需要的内容,例如:
import orderBy from 'lodash/orderBy'
在nuxt.config.js
年,lodash被添加到vendor
个名单中.
然而,当我们创建构建时,webpack总是包含整个lodash
库,而不是只包含我们在代码中使用的内容.
我读了很多教程,但还没有找到答案.如果只是一个网页项目,其中一些答案肯定会奏效.但在我们的例子中,它是通过nuxt配置文件实现的.
期待得到帮助.
下面是部分nuxt.配置.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`
}
}
}