nuxt下按需加载element-ui
在打包nuxt项目时,打包会提示vendor.xxxxx.js文件超过300kB的警告,如下图:
主要配置如下:
a) package.json
{
"name": "Demo",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"dependencies": {
"element-ui": "^2.4.7",
"nuxt": "^1.4.2"
}
}
b) nuxt.config.js
module.exports = {
css: [
// 公共 CSS 文件
'~/assets/css/common.css'
// 第三方插件 CSS 文件
{src: 'element-ui/lib/theme-chalk/index.css'},
],
build: {
vendor: ['element-ui']
},
plugins: [
{ src: '~/plugins/element-ui', ssr: true }
]
}
c) plugins/element-ui.js
import Vue from 'vue'
import ElementUi from 'element-ui'
Vue.use(ElementUi)
一、分析打包情况:
Nuxt.js 可以使用 webpack-bundle-analyzer 来分析打包的文件,你可以基于分析结果来决定