Nuxt element-ui 按需引入

官方文档：按需加载

完整引入

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 !!!