完整引入
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
优化前 vendors 199.77KB
1. 安装 babel-plugin-component：
npm install babel-plugin-component -D
2. 修改nuxt.config.js
build: {
babel: {
plugins: [
['component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}
}
3. 修改 plugins/element-ui.js
import Vue from 'vue'
import {
Carousel,
CarouselItem,
Message
} from 'element-ui'
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.prototype.$message = Message
4. 修改nuxt.config.js
// 不需要引入css了
css: [
// 'element-ui/lib/theme-chalk/index.css'
],
为什么不需要引入css了，因为 babel-plugin-component 帮我们按需引入了相应的css了
5. 打包后
优化后 vendors 18.49KB
打包后只有原来的 1 / 10 !!!
