use dynamic import instead of System.import

Author: yyx990803

.babelrc

@@ -1,5 +1,8 @@
 {
   "presets": [
     ["env", { "modules": false }]
+  ],
+  "plugins": [
+    "syntax-dynamic-import"
   ]
 }

package.json

@@ -33,6 +33,7 @@
     "autoprefixer": "^6.7.7",
     "babel-core": "^6.24.1",
     "babel-loader": "^6.4.1",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-env": "^1.4.0",
     "css-loader": "^0.28.0",
     "file-loader": "^0.11.1",

src/router/index.js

@@ -4,9 +4,9 @@ import Router from 'vue-router'
 Vue.use(Router)
 
 // route-level code splitting
-const createListView = id => () => System.import('../views/CreateListView').then(m => m.default(id))
-const ItemView = () => System.import('../views/ItemView.vue')
-const UserView = () => System.import('../views/UserView.vue')
+const createListView = id => () => import('../views/CreateListView').then(m => m.default(id))
+const ItemView = () => import('../views/ItemView.vue')
+const UserView = () => import('../views/UserView.vue')
 
 export function createRouter () {
   return new Router({

yarn.lock

@@ -362,6 +362,10 @@ babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
 
+babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
 babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"