带有 webpack 的 Vuejs 延迟加载路由器

Question

遵循本指南：https://alligator.io/vuejs/lazy-loading-routes/

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const Other = r => require.ensure([], () => r(require('./components/Other.vue')))
const Home = { template: '<div><h2>Home Page</h2></div>'}

const routes = [
  { path: '/', component: Home },
  { path: '/other', component: Other }
]

const router = new VueRouter({
  routes,
  mode: 'history'
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

这会输出主 js 文件以及所述组件的另一个。相当无痛。

是否有可能以某种方式整理这条线路。我试图将该行包装在一个函数中，但这会发出警告： “./src/main.js 中的警告 13:15-28 关键依赖：依赖的请求是一个表达式”

这是使用 webpack 构建失败的抽象...

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

import About from './components/About.vue'
import Other from './components/Other.vue'

let lazyLoader = function( path ){
  return r => require.ensure([], () => r(require(path)))
}

const LazyAbstraction  = lazyLoader('./components/LazyLoadMePlease.vue')
const Home = { template: '<div><h2>Home Page</h2></div>'}
const Contact = { template: '<div><h2>Contact Page</h2></div>'}

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/lazy', component: LazyAbstraction },
  { path: '/contact', component: Contact },
  { path: '/other', component: Other }
]

const router = new VueRouter({
  routes,
  mode: 'history'
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Answer 1

你不需要require.ensure

试试这个方法const Foo = () => import('./Foo.vue')来自LazyLoading Vue

Webpack 会为每个import()解析另一个js文件