问题:单页面应用的致命问题:首屏加载极慢
因为单页面应用默认必须在首次请求的时候把所有的页面组件都下载到客户端本地
- 异步延迟加载(脚手架默认)
-
暂时不要把除了首页之外的其他组件 import 引进程序中
-
在路由字典中进行定义,只有当用户访问到某个组件的时候,才会冬天的引入这个组件
-
router/index.js
{ path:"xxx", // 暂时不要把路径 引入项目 // 只有当用户访问到这个路径的时候,才会将路径的组件引入到项目中 component:()=> import ("@/views/xxx") // component:()=> import ( /*webpackChunkName:"detail"*/ "加载组件的路径" ) // 注意 /**/ 里面的格式 外面有空格哦(当然没开严格语法可以不管) // 如果不加webpack这个东西,import打包出来的文件,默认是按照0 1 2 ... 排列 0.js }
-
彻底解决懒加载的问题: vue.config.js
-
如果用户不访问其他组件的时候,则根本一点都不下载其他组件的内容
-
在vue-cli中 添加一个配置信息
- 在vue脚手架根目录下,创建vue.config.js
- 在vue.config.js 中添加配置信息,禁止提前下载其他组件
// 一般情况下自己也不会主动动手写,面向百度编程
module.exports = { chainWebpack:config => { config.plugins.delete("prefethc") //删除index.html页面中开头带有prefetch属性的插件,也就是不要异步下载暂时不需要的页面组件 } }
- 重启脚手架
-
-