公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页。开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了。

众所周知,单页面程序优点是在页面初始化时加载相应的HTML、JavaScript 和 CSS,一旦页面加载完成了,就不用再做其他的加载和跳转了,极大的提升了页面的流畅性,提供良好的用户体验。那么问题来了,把所有东西都放在初始化的时候做,就造成了页面首次加载需要更长的等待时间。而对于那些作为app内嵌的页面,每一次的加载都是首次加载,所以你们懂的,体验极差。

接下来就是一系列的首次加载优化,webpack优化,js优化,css优化等等等等,该删的删,该改的改,一顿操作后,终于不会像开始时那样,app进个页面等半年。两个字,心累。

所以在这里建议广大vue爱好者,如果要做app内嵌页的话,最好不要选择vue单页面的框架,vue也支持多页面应用啊,哈哈。

金无足赤,在享受一些技术带来的便利的同时,也该了解它们一些方面的不足。懂得做到合理应用才是提高开发效率的不二法门。

用vue做app内嵌页遇到的坑的更多相关文章

  1. 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)

    使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...

  2. app内嵌web的一些问题记录

    问题(1)webview里面出现大图预览,点击手机上的返回,应该是图片预览消失 问题(2)键盘输入的时候,键盘会把输入框遮挡 ------------------------------------- ...

  3. 移动端开发利器vConsole.js,app内嵌H5开发时调试用

    vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...

  4. 使用Windows安装的最高版本IE内核加载内嵌页(转载)

    客户端程序内嵌Webbrowser控件时,默认情况都是使用IE7兼容模式打开网页的.但是IE7有很多新的特性不支持,导致无法正常显示出来,所以需要强制使用高版本的IE内核来加载.渲染. void Ch ...

  5. app内嵌vue h5,安卓和ios拦截H5点击事件

    安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的 安卓和ios拦截普通h5函数: <div onclick = "show(),window.android.sh ...

  6. ios下app内嵌h5页面是video适配问题

    ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...

  7. app内嵌H5网页(webviewJavaScriptBridge)

    摘要:使用的插件为webviewJavaScriptBridge,app端需要引入一下这个包,html页面只需一段JS代码 与IOS交互 <! 申明交互(此处代码固定) > functio ...

  8. 内嵌页js与ios和安卓的交互

    ios: 一个iframe,改变url会发送一个请求,把url设置成就是bridge://xxxxx客户端就可以拦截请求,并在全局变量xxxxx中取出一个字符串.例如{event:'click'},可 ...

  9. app内嵌H5调用分享

    最近产品提出了一个需求:我们在合作方的app中提供的部分页面中增加分享页面,具体要求是在3个二维码推广页面调用app的分享接口,分享方式有3种,分别是点击”分享链接“按钮调起分享,点击”分享图片“按钮 ...

随机推荐

  1. Java中的Redis应用

    1.配置redis集群   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <?xml version="1.0" encoding ...

  2. 删除“自豪的采用wordpress”

    网上的都是老一套了,方法不对. 听我的~ 先进入wordpress的安装目录,比如我的是:cd /www/wwwroot/www.yangnan.tk然后再进入,我的主题是twentyseventee ...

  3. 掌握numpy(三)

    统计功能 前面都是介绍numpy的一些特性,被称为数学运算神器怎么能少了统计功能呢 ndarray的方法 a = np.array([[-2.5, 3.1, 7], [10, 11, 12]]) &g ...

  4. Git问题集锦

    1.初始新建git,出现No refs in common and none specified; doing nothing 解决方案:Perhaps you should specify a br ...

  5. 手动安装Eclipse的PyDev插件,重启无效

    想好好学习Python,又不想只用Emeditor开发,于是想到了Eclipse.之前配置过PyDev,很久没用,就放下了.这次重新配置,遇到了不少问题总结如下: 第一,使用网址自动更新.从网上搜了很 ...

  6. spring4新特性-泛型依赖注入

    1 文件结构  2 具体类  2.1两个抽象类,在Service里面写公共的方法,在各自的具体实现类里面写各自的方法 package repo;import model.User;/** * Crea ...

  7. CSS实现模糊效果

    HTML代码如下: <body> <h1>body设置了模糊效果</h1> <div id="aa"></div> &l ...

  8. MyRapid WinForm 快速开发框架

    MyRapid 框架介绍开发历程:作者是数据库相关软件开发从业人员,懒惰的,能交给电脑做的事情懒得自己做开发目的:处理底层数据传输,减少工作量,提高开发效率框架特点:数据库相关开发.易学易用.快速上手 ...

  9. java.lang.ClassCastException: com.sun.proxy.$Proxy2 cannot be cast to...异常

    异常: Exception in thread "main" java.lang.ClassCastException: com.sun.proxy.$Proxy2 cannot ...

  10. jquery类数组结构学习笔记

    大家都知道我们使用$()产生的jquery对象可以使用下标去获取对应下标的元素. 举个栗子,一个页面有5个div标签,我们使用$("div")去获取到这些元素,然后我们就可以使用$ ...