随着您的SPA(单页应用程序,对于未启动者)的复杂性增加,应用程序包的大小也增加了。过了一会儿,它成为了您页面的加载时间的重大障碍。 幸运的是,Viege-router支持webpack的嵌入式模块加载系统。 因此,在访问路径时,将更少使用的路径的路由组件分开成按需加载的路由组件现在很少。
使用
假设您的路线配置是这样的东西:
1import MainPage from './routes/MainPage.vue'
2import OtherMassivePage from './routes/OtherMassivePage.vue'
3
4const routes = [
5 { path: '/main', component: MainPage },
6 { path: '/other', component: OtherMassivePage }
7]
字面上说,你所需要做的就是将 OtherMassivePage 和其所有依赖(其他任何东西都不共享)分成一个单独的部分,就是用一个可怕的 require.ensure 调用来代替导入声明。
如果你重新加载你的应用程序,你应该注意到没有什么看起来不同,直到你检查网络开发人员的工具,并看到当你第一次加载 / 其他路线时,有一个新的文件被加载。
1import MainPage from './routes/MainPage.vue'
2const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')))
3
4const routes = [
5 { path: '/main', component: MainPage },
6 { path: '/other', component: OtherMassivePage }
7]
是的,我知道它看起来很可怕,但相信我,它并不像一开始看起来那么糟糕。
它就像一个承诺,最终解决了被加载的组件。
1const OtherMassivePage = resolve => {
2 // The empty array is for specifying other dependencies that need to be loaded.
3 require.ensure([], () => {
4 resolve(require('./routes/OtherMassivePage.vue'))
5 })
6}
不幸的是,你不能真正使用任何抽象或包装来缩短这一点,因为webpack使用静态分析来检测和分裂碎片。
连接路线
有时你可能有多个路径或组件,你想要在同一个片段. 要做到这一点,你可以简单地传输第三个参数 require.ensure 指定组的名称来组合这些组件。
1// Both routes are output in the same chunk and bundle, causing that bundle to be lazy-loaded when either route is accessed.
2const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')), 'big-pages')
3const WeightLossPage = r => require.ensure([], () => r(require('./routes/WeightLossPage.vue')), 'big-pages')
与许多其他与webpack的任务不同,这是一个意想不到的简单的方法来产生一个惊人的有用的结果. 我肯定会建议使用这个模式,如果你正在工作的大型SPA正在变得肿胀。