Dynamic import router components

lyyourc · May 3, 2017 · 4fb8417 · 4fb8417
1 parent 84d6c7c
commit 4fb8417
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 4 deletions.
diff --git a/.babelrc b/.babelrc
@@ -6,5 +6,6 @@
         "browsers": ["last 2 versions"]
       }
     }]
-  ]
+  ],
+  "plugins": ["syntax-dynamic-import"]
 }
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   "devDependencies": {
     "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-env": "^1.4.0",
     "babel-preset-latest": "^6.0.0",
     "cross-env": "^3.0.0",

diff --git a/src/router.js b/src/router.js
@@ -1,8 +1,13 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-import Emoji from './pages/Emoji.vue' 
-import Photos from './pages/photos.vue' 
+const Emoji = () => import(
+  /* webpackChunkName: "Emoji" */
+  './pages/Emoji.vue')
+
+const Photos = () => import(
+  /* webpackChunkName: "Photos" */
+  './pages/Photos.vue')
 
 
 Vue.use(VueRouter)

diff --git a/webpack.config.js b/webpack.config.js
@@ -10,7 +10,8 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, './dist'),
     // publicPath: '/dist/',
-    filename: '[name].js'
+    filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
   },
   module: {
     rules: [

diff --git a/yarn.lock b/yarn.lock
@@ -348,6 +348,10 @@ babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "http://registry.npm.taobao.org/babel-plugin-syntax-async-functions/download/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
 
+babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "http://registry.npm.taobao.org/babel-plugin-syntax-dynamic-import/download/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
 babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "http://registry.npm.taobao.org/babel-plugin-syntax-exponentiation-operator/download/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"