最近无论是在公司还是自己研究的项目，都一直在搞 H5 页面服务端渲染方面的探索，因此本文来探讨一下服务端渲染的必要性以及其背后的原理。先来看几个问题To C 的 H5 为什么适合做 SSRTo C的营销H5页面的典型特点是：流量大交互相对简单（尤其是由搭建平台搭建的活动页面）对于页面的首屏一般都有比较高的要求那么此时作...

这个大的项目以 low code 为核心，囊括了编辑器前端、编辑器后端、C 端 H5、组件库、组件平台、后台管理系统前端、后台管理系统后台、统计服务、自研 CLI 九大系统。

开篇，我们先来看一下远古时代的构建部署流程。想必大家对这个都不陌生：开发将源码经过编译、压缩打包生成打包文件将打包生成的文件上传服务器显然这个流程不仅繁琐，而且效率也不高，开发每次发布都要耗费很长的时间在部署构建上面。后面为了解决这个问题，就出现了CI/CD。接下来我们来聊一下什么是CI/CD？CI/CD 是 Co...

husky想必大家都不陌生。作为前端工程化中一个不可或缺的的工具，它可以向我们的项目中添加git hooks。同时配合lint-staged可以方便的在代码提交前进行lint。

就是切换歌曲时，会根据当前封面替换背景色。作为资深切图仔，我那该死的好奇心兜不住了，不行，我要去一探究竟。首先我构思了很多它可能的实现方式：

其实这些名词都与搭建相关。其中一个应用最广的场景就是营销。我们知道无论是淘宝、京东这些电商巨头，亦或是携程、去哪儿这些OTA，每天 APP 上都承接着无数的活动页面。

Vite在去年就已经出来了，但我真正的去了解它却是在最近Vue Conf上李奎关于Vite: 下一代web工具的分享。其中他提到的几点吸引到了我。分享的开始，他简要说明了本次分享的关键点：

前两天上班，突然小叶给我发消息：哥哥，你看这两段代码是什么意思啊？乍一看，感觉这代码既熟悉又陌生。好像在哪里见过，但平时好像又很少用到。我喝口水，冷静的想了 3s：咦，这个不就是那个位运算符吗？之前大学就学过，前一段看react源码也有看到过啊！小叶：哥哥，那你能不能给我讲一下这是什么呢？我：没问题，等...

上篇文章我们已经了解了前端单元测试的背景和基础的jestapi，本篇文章我会先介绍一下Enzyme，然后结合项目中的一个真实组件，来为它编写测试用例。

关于前端单元测试，其实两年前我就已经关注了，但那时候只是简单的知道断言，想着也不是太难的东西，项目中也没有用到，然后就想当然的认为自己就会了。

写在前面这道题目是面试中相当高频的一道题目了，但凡你简历上有写：“熟练使用Vue并阅读过其部分源码”，那么这道题目十有八九面试官都会去问你。什么？你简历上不写阅读过源码，那面试官也很有可能会问你是否阅读过响应式相关的源码还是那句歌词唱的： {代码...} 整体流程作为一个前端的MVVM框架，Vue的基本思路和Angula...

写在前面今天这道题目是在和小红书的一位面试官聊的时候：我：如果要你选择一道题目来考察面试者，你最有可能选择哪一道？面试官：那应该就是介绍一下tree shaking及其工作原理？我：为什么？面试官：是因为最近面了好多同学，大家都说熟悉webpack，在项目中如何去使用、如何去优化，也都或多或少会提到tree shaking，但...

讲真的，最近也很迷茫。关于技术、关于生活吧。也找了很多在大厂的朋友去聊，想需求一些后期发展的思路。这其中也聊到了面试，聊到了招聘中会给面试者出的一些题目。我正好也好久没面试了，就从中选了几道。最近也会陆续出一系列关于一些面试问题的解析。

前一段时间我把webpack源码大概读了一遍，webpack 到4.x版本后，其源码已经比较庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。

引言一些开源的生产力工具能极大的提升我们的开发效率（我一直是这么认为的 🤠）。今天推荐一些我一直在用的、比较香的工具给大家。其中包括一些文档、可视化工具、分析工具、代码片段、调试工具等。Collect UI 🦑Collect UI画廊是一个免费的在线资源，用于每日UI设计灵感。 目前，它有 6500 多个条目，并且持续保持更新最...

本文以我自己的经验向大家分享如何通过一些分析工具、插件以及webpack新版本中的一些新特性来显著提升webpack的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。

关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM)，CSS Object Model (CSSOM)，渲染树和布局。

最近在开发一款桌面端应用，用到了Electron和React。React作为日常使用比较频繁的框架，这里就不详细说明了，这里主要是想通过几篇文章让大家快速上手Electron以及与React完美融合。本篇是系列文章的第一篇，主要是给大家分享Electron的一些概念，让大家对Electron有一个初步的认知。先来了解一下什么是Electron吧，可能...

由于业务需要，近期团队要搞一套自己的UI组件库，框架方面还是Vue。而业界已经有比较成熟的一些UI库了，比如ElementUI、AntDesign、Vant等。

引言 🏂我们平时的工作中，github是必不可少的代码托管平台，但是大多数同学也只是把它做为了托管代码的地方，并没有合理的去运用。其实github里面有非常多好玩或者有趣的地方的。当然，这些技巧也能对你的工作效率有很大的提升。我整理了一些自己平时用的比较多的一些功能/技巧，也希望能给你的工作带来一些帮助！Gist 🍓...

引言（文末有福利）🏂算法一直是大厂前端面试常问的一块，而大家往往准备这方面的面试都是通过leetcode刷题。我特地整理了几道leetcode中「很有意思」而且非常「高频」的算法题目，分别给出了思路分析（带图解）和代码实现。认真仔细的阅读完本文，相信对于你在算法方面的面试一定会有不小的帮助！🤠两数之和 🦊题目难度eas...

写这篇文章的缘由是上周在公司前端团队的code review时，看了一个实习小哥哥的代码后，感觉一些刚入行不久的同学，对于真实项目中的一些js处理不是很熟练，缺乏一些技巧。

作为开发人员，平时用的最多的就是Chrome devtools了，但是可能很多同学都像我一样平时用的最多也就只是Console和Elements面板了。

koa 是一个基于 node 实现的一个新的 web 框架，它是由 express 框架的原班人马打造。特点是优雅、简洁、表达力强、自由度高。和 express 相比，它是一个更轻量的 node 框架，因为它所有的功能都通过插件来实现，这种插拔式的架构设计模式，很符合 unix 哲学。

引言 其实很早就想写一篇关于 css 的文章了。（拖延症，一直没写。。。） css 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。 今天带大家看几个用css（部分会用到canvas和js）实现的好玩儿的效果（不好好琢磨下，还真写不出来） 本篇文章有参考一些css大佬的杰作，...

继上篇文章「Koa2+MongoDB+JWT实战--Restful API最佳实践」后，收到许多小伙伴的反馈，表示自己对于mongoose不怎么了解，上手感觉有些难度，看官方文档又基本都是英文（宝宝心里苦，但宝宝不说）。

通常我们为 Web API 使用 RESTful 设计，REST 概念分离了 API 结构和逻辑资源，通过 Http 方法GET, DELETE, POST 和 PUT等 来操作资源。

作为 node 自带的包管理器工具，在 nodejs 社区和 web 前端工程化领域发展日益庞大的背景下，npm已经成为每位前端开发同学必备的工具。

随着 Web 技术和移动设备的飞速发展，各种 APP 层出不穷，极速的业务扩展提高了团队对开发效率的要求，这个时候使用 IOS/Andriod 开发一个 APP 似乎成本有点过高了，而 H5 的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式：Hybrid APP。

git 规定提交时必须要写提交信息，作为改动说明，保存在 commit 历史中，方便回溯。规范的 log 不仅有助于他人 review, 还可以有效的输出 CHANGELOG，甚至对于项目的研发质量都有很大的提升。