在 Vue2 中，异步组件和路由懒加载处理使用 import 就可以很轻松实现但是在 Vue 3x 中异步组件的使用与 Vue 2x 完全不同了本文就详细讲讲 vue3 中 异步组件 和 路由懒加载 的实现所以，下面的异。

以上是常规引入页面得部分 下面来看下使用路由懒加载的写法 看一下打包之后的效果，会看到打包出了多个chunk异步块同样可以使用特殊注释语法。

keepalive用来缓存组件，避免了每次点击其他页面都要加载，减少性能消耗和提高用户体验，下图缓存整个路由视图所有页面，也可以缓存单个组件 图片懒加载用了 vuelazyload 组件，npm安装npm i vuelazyload S#160我是。

1懒加载路由使用懒加载路由可以在需要时异步加载组件并分块打包，从而避免一次性加载所有组件，优化页面加载速度2合理划分路由根据业务需求合理划分路由，避免无限制的添加子路由，尤其是对于大型项目而言3缓存组件。

vue由静态路由改为动态路由时，出现下面的错误 静态路由懒加载，当我们把router写死import里面它是正常加载的，可是我们通过api接口拉取过来的数据时，发现是不报了上面的错export const importPath = comUrl =。

使用vue create #39文件名#39，创建一个vue脚手架，vueuseVueRouter，调用vuerouter这个对象上面的install方法，注册两个属性在vue原型对象上，分别是vueprototype$router整个项目的路由对象和vueprototype$route当前。

1 什么是vue的计算属性computed 计算属性是需要复杂的逻辑，可以用方法method代替 2vuecli提供的几种脚手架模板 vuecli 的脚手架项目模板有browserify 和 webpack3组件中传递数据4 vuerouter实现路由懒加载。

报错原因 很有可能是你在路由懒加载的时候，在import里使用了动态路径比如， component = import* webpackChunkName quothomequot * PATH + #39Indexvue#39 ，这样的路径是不起作用的，具体原因可以查看。

* 懒加载功能 一开始不加载，当你切换路由的时候再加载 * component = import* webpackChunkName quotaboutquot * #39viewsAboutViewvue#39， * about不是根路径 所以redirect后面要写全 #39aboutaboutchild#39。

是因为程序自身的Bug导致页面加载异常利用路由的懒加载实现组件的按需加载，这样配置后只有当路由被访问时才会加载对应的组件，而不是在加载首页的时候就直接加载即可恢复。

所以就想了另外的方法 项目中我主要是针对首屏加载做了优化，我觉得只要首屏快速出来了，其它的就慢慢来吧，哈哈 还有其它的一些方向，路由懒加载，外部引入资源，这些都很容易了，就不罗列了。

1打包的时候不生成map文件打包的时候生成gzip文件，部署的时候，让nginx直接读取gzip文件2路由加载的时候采用懒加载模式3首页较大的图片适当的进行压缩即可。

没有这个boundry见图，最后还是用了vueresource中的。

如下图所示，该二级路由信息中的component信息采用了 路由懒加载 的方式导入 然后在一级路由页面onevue中写入二级路由页面的routerlink导航和routerview 最终效果如下图所示。

即appjs文件过大导致的如何来处理 vue在webpack打包的过程中，将多余文件。

原本有三个文件，分割的是这三个文件里面的name属性。