nuxt.config,js 配置 Element-ui 懒加载，实现ui框架按需加载，优化 vendors 大小

前言

nuxt 学习之路 - nuxt.config.js 配置篇。通过实现框架懒加载来实现优化项目打包体积大小。（本篇使用 element-ui 为例，使用插件 babel-plugin-component）。

---

一、未优化前

// plugins/element-ui.js
import Vue from 'vue'
import { Button, Loading, Notification, Message, MessageBox } from 'element-ui'

import lang from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale'

locale.use(lang)

Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

Vue.use(Button)

运行项目时可以发现，虽然我们只引入 element-ui 的几个组件，但是 vendors.app.js 文件的体积还是很大，如下图：

二、使用 babel-plugin-component 实现懒加载，优化打包体积

plugins/element-ui.js 文件的内容不变，先安装插件（npm i babel-plugin-component -D），再配置 nuxt.config.js，

// nuxt.config.js
module.exports = {
	build: {
	    // 为 JS 和 Vue 文件设定自定义的 babel 配置。
	    babel: {
	      plugins: [
	        [
	          'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' }
	        ]
	      ]
	    }
	}
}

重新 run 下，可以看到此时的 vendors.app.js 由之前的 2.3Mb 变成了现在的 988kb，babel-plugin-component 实现 按需加载，只把我们引用到的组件加载进来，如下图：