lipten主页

前言相信很多人看了标题都觉得一脸懵逼，我就不卖关子用人话解释一下吧：就是在某些情况(需求)下的服务端渲染应用需要获取客户端的某些参数(window.innerWidth之类的)使服务端首屏渲染能够响应适合的内容(根据window.innerWidth做响应式网站) 这种需求还是有的，比如rem布局，需要客户端加载js获取当前窗口宽度来设置根元素的font-size，对于我来说，以前开发都是客... 阅读全文…

今天偶然翻到以前写的一篇笔记，是以前在上家公司做的一个打包优化程序，那个时候webpack还没火，大家都是靠gulp、grunt工具来打包发布的。 现在翻出来看到以前的优化笔记感觉有些陌生了，使我产生了一种错觉(我以前竟然能写出像webpack一样的打包程序)，那个时候写这个程序对于我来说确实是一项很大的挑战，gulp各种构建功能、node文件操作正则匹配模板解析、结合业务代码结构优化等等，... 阅读全文…

什么是可降级的同构框架这里指的可降级与服务器降级意思相近（主逻辑失败采用备用逻辑的过程），考虑到服务端渲染并发及高负载的问题，在主服务器无法提供正常服务的时候可降级为”低功耗模式”，采用客户端渲染方式来减轻服务器负载。 框架选型next.js我看了一下next.js，他们的开发方式很新颖，尤其是路由配置，完全不用自己配，按照他的规则来做就行了。但我这个人比较求稳，这种约定大于配置的方式对于我... 阅读全文…

前言看到标题的人肯定会问，seo-mask是什么，为什么可以解决单页应用seo无法被收录的难题呢？ 简单来讲seo-mask做的就是为已经发布线上运营的的单页应用项目建立另一个简单的利于seo的镜像网站，使搜索引擎能够爬取到不同路径下对应的内容，无需改造现有代码。 关于seo-mask的解释及同样能解决单页应用seo问题的其他方法的对比都在《seo-mask – 为单页应用创建一个适合蜘蛛爬... 阅读全文…

seo-maskseo-mask是利用搜索引擎蜘蛛的爬取原理（蜘蛛只会爬取网页的内容，并不会关心解析网页里的css和js），制作一套专门针对seo的镜像网站，鄙人称它为针对seo的mask，让蜘蛛看到的是网站的mask更利于收录。无需改变原有网站的源码，此方法适合seo改造成本较大的具有动态数据的spa单页应用。 与流行的seo方案对比 优点 缺点 prerender 预渲染 ... 阅读全文…

网上有好几种单页应用转seo的方案，有服务端渲染ssr、有预渲染prerender、google抓AJAX、静态化。。。这些方案都各有优劣，开发者可以根据不同的业务场景和环境决定用哪一种方案。本文将介绍另一种思路比较清奇的SEO方案，这个方案也是有优有劣，就看读者觉得适不适合了。 项目分析我的项目是用react+ts+dva技术栈搭建的单页应用，目前在线上已经有几十个页面，若干个sdk和... 阅读全文…

继之前的一篇《记前端项目首屏加载优化（打包篇）》之后，这次来讲一讲我的首屏加载在网络方面的优化😏。 写在前面资源加载是一个网站的展示在用户浏览器的必经之路，资源的请求次数和响应时间决定了网站的加载体验。本篇主要针对请求次数和响应时间聊一聊优化过程。 网站分析与测试环境有很多工具可以检测网站的网络请求：比如WebPage Speed Test，Instant Website Test，... 阅读全文…

写在前面相信进来的观众一定很想知道我究竟埋了什么彩蛋🤔，这里说的“彩蛋”，指的是程序里的彩蛋(我的理解是一种区别于程序本身别有洞天的一番景象，并具有一定代表意义的小程序📟)，我埋的彩蛋的是在一个网站里的，彩蛋必须是玩家自己找到才有用的😎，先看看下面的彩蛋提示再进入网站找彩蛋哈😜。 彩蛋提示埋彩蛋的程序是编程猫社区官网，用浏览器访问，再打开浏览器的开发者工具的控制台📟。可以看到一个大... 阅读全文…

看了一下我司官网的webpack打包出来的大小情况，发现有很多可以优化的点，比如 lodash、moment.js、antd等等；本文主要围绕webpack的打包优化，并根据业务情况适当的做减法。 优化前分析优化前一定要有一个界面能记录目前的打包情况，推荐用webpack-bundle-analyzer这个包, 它可以看到打包后每个模块的大小，还能给出gizp压缩后的大小，在生产环境中加... 阅读全文…

写在前面工作中遇到一个这么一个需求：这是一个多图上传的场景，如果用户上传选择多张图片，则上传后直接展示多张图片，如果上传的图片是gif动图，则需要分解这张动图拆分成一帧一帧的单张图片，再按顺序展示出来。 实现思路这里主要针对gif分解多图的实现 首先对用户上传的文件格式进行判断； 将gif动图经过gif库解析成gif实例 遍历获取gif实例的每一帧的canvas，转换成baseURL，再转一... 阅读全文…