vue(单页面应用)实现按需加载页面的方式三种

最新推荐文章于 2024-10-09 18:14:54 发布

就像风1样

最新推荐文章于 2024-10-09 18:14:54 发布

阅读量6.4k

点赞数 1

分类专栏： Vue JavaScript 心得 vue专栏

本文链接：https://blog.csdn.net/qq_42221334/article/details/81909558

版权

本文介绍了Vue中实现按需加载页面的三种方式：利用vue的异步组件技术，通过es提案的import()，以及使用webpack的require.ensure。详细阐述了在vue-router配置中如何应用这些技术，以优化应用性能。

摘要由CSDN通过智能技术生成

1. vue异步组件技术

vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。

但是，这种情况下一个组件生成一个js文件。

/* vue异步组件技术 */
{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'],resolve)
},{
  path: '/index',
  name: 'Index',
  component: resolve => require(['@/components/index'],resolve)
},{
  path: '/about',
  name: 'about',
  component: resolve => require(['@/components/about'],resolve)
}