按需加载element-ui

.babelrc

@@ -3,7 +3,12 @@
     ["env", { "modules": false }],
     "stage-2"
   ],
-  "plugins": ["transform-runtime"],
+  "plugins": [["component", [
+    {
+      "libraryName": "element-ui",
+      "styleLibraryName": "theme-default"
+    }
+  ]]],
   "comments": false,
   "env": {
     "test": {

package.json

@@ -26,6 +26,7 @@
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
+    "babel-plugin-component": "^0.9.1",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.2.1",
     "babel-preset-stage-2": "^6.22.0",
@@ -35,10 +36,10 @@
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.26.1",
     "eslint": "^3.14.1",
+    "eslint-config-standard": "^6.2.1",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.6.1",
     "eslint-plugin-html": "^2.0.0",
-    "eslint-config-standard": "^6.2.1",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
@@ -49,17 +50,17 @@
     "function-bind": "^1.1.0",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "semver": "^5.3.0",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.1.0",
     "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
     "url-loader": "^0.5.7",
     "vue-loader": "^11.1.4",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.2.1",
     "webpack": "^2.2.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.16.1",
     "webpack-merge": "^2.6.1"

src/common/element-ui-import.js

@@ -0,0 +1,34 @@
+/**
+ * @author monkeywang
+ * Date: 17/3/27
+ */
+import Vue from 'vue'
+import
+{
+  Button,
+  Select,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Input,
+  Loading,
+  Rate
+} from 'element-ui'
+let variable = {
+  Button,
+  Select,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Input,
+  Loading,
+  Rate
+}
+for (let item in variable) {
+  if (variable.hasOwnProperty(item)) {
+    Vue.use(variable[item])
+  }
+}
+
+export default Vue
+

src/main.js

@@ -1,12 +1,12 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import Element from 'element-ui'
-import 'element-ui/lib/theme-default/index.css'
+import Vue from './common/element-ui-import'
 import App from './App'
 import router from './router'
 import store from './store'
-Vue.use(Element)
+require.ensure([], function () {
+  require('element-ui/lib/theme-default/index.css')
+})
 
 Vue.config.productionTip = false