我们已经构建了一个 Nuxt/VueJS 项目。
Nuxt 有自己的名为 nuxt.config.js
的配置文件,我们可以在其中配置 webpack 和其他build设置。
在我们的 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`
}
}
}
最佳答案
您可以npm install
仅需要的包
Lodash 可以根据 custom builds 拆分.您可以找到已经可用的列表 here .您可以像这样使用它们:npm i -S lodash.orderby
。我没有检查它,但您可能还需要将 import orderBy from 'lodash/orderBy'
更改为 import orderBy from 'lodash.orderby'
。
关于javascript - 我们如何在 Nuxt?Vuejs 项目中仅包含来自 lodash 的必需模块?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49301521/