我们在浏览一些网站时，经常会看到网站具有主题切换的功能，最简单的比如很多网站都提供了护眼模式,说白了也就是有黑色主题和白色主题可以让用户选择，比如Vue3、React官网还有一些ToC的网站可能会有除了黑白主题之外的更高级的主题需求，比如要支持红色、蓝色、粉色的主题。甚至有一些产品经理提的需求更变态，要支持用户自定义主题色，直接把一个调色板丢给用户，让用户自己选自己喜欢的颜色，页面上所有得主题色都要随着用户自己选择的主题色做更改。上面的这三种主题色的需求在实现上正好是由易到难，那么我们改如何实现呢？下面我们就一起来看一下目前流行的几种前端主题方案。方案1：CSS Filter属性CSS...

以上脑图为文章知识整理。参考文章1.https://mp.weixin.qq.com/s/uFJtFHKfj6D7qfX4LwWXkw

一、背景 现在的前端开发，绕不开使用一些第三方的NPM包。同时，很多公司不论大小都有了自己的NPM仓库，然后发布一些只有自己使用的私有NPM包。我们在发包的时候，包的代码怎么构建才能体积最小，同时做到新能最好就成了一个非常重要的问题。 在一些发包实现中，无论是UI包还是纯粹的TypeScript Utils包，你当然都可以不打包而直接将代码放到npm包的dist目录中，然后以来业务工程进行构建。但是这显然是有问题的，因为这些NPM包都是比较稳定的代码，不像业务代码那样需要进行频繁的修改和调试了，直接暴露源码给业务使用，会使这些包在不同的项目中多次重复构建，无疑会拉长业务开发时热更新...

一、背景 在各个公司的开发流程中，CI/CD都是必不可少的一环，他能持续的部署我们研发的代码，保证我们能在最快的时间看到线上的效果。 但是，你的CI/CD真的足够快吗？你们真的能在第一时间看到应用部署成功后的效果吗？在使用一些云服务商提供的云服务时，CI/CD还会按照时间计费，你们的CI/CD真的达到了最高能效比了吗？下面，就给大家讲讲我的基于阿里云的CI/CD优化经历，希望能给大家带来一些工作上的启发。二、实践减少不必要的构建节点（尤其要解耦出后端节点）优化特殊的费时的包安装环节利用流水线缓存能力，及每次安装包的yarn.lock生成hash来命中缓存使用...

一、背景&现状1.在22年下半年时，针对vue开发时热更新慢（包括CSR和SSR）的问题，专门做过一次性能优化,发布@**********版本，牛客所有项目热更性能平均提升90%左右。2.22年优化完成后，主站陆续有同学反馈，在开启SSR热更时开发依然很慢（热更时间长达10min），我将本地项目切换到@ncfe/nc.webpack2.x版本后，对比了2.x版本和3.x版本，在使用时3.x版本SSR性能提升明显。我将反馈热更慢的同学（姜同学）电脑重启后，发现CSR+SSR全量热更时间仅5S，怀疑是一线同学长期不重启Mac，Mac本身的内存管理问题。HMR Time comp...

#离谱？！一本院校招聘会招洗碗工#学历持续通胀，寒冬周期降临，今年都赶上了，同情今年毕业的大学生

#90后代表称大学生可以回农村#体验过了城市的物质丰富但繁忙，我也想回农村体验一下那种自给自足但悠闲的日子

#14天打卡计划# 把系统A里面的代码放到系统B里面运行，这工作刺激#14天打卡计划#

昨天因为babel的一个更新，是救火的一天，没想到babel的核心开发者也是个小可爱https://github.com/babel/babel/pull/15266

一、背景&现状1.当前牛客的业务打包、热更新工具基于webpack5，虽然经过一次统一优化，但是和目前行业最先进打包工具的构建、热更新时间还有差距。HMR（项目名称就不公开了）优化前优化后行业前沿project 12~3分钟~3秒（+按路由拆分运行）毫秒级project 21分钟~5秒project 330秒~4秒Build优化之前优化之后行业前沿project 19分钟6秒3分钟23秒毫秒级project 29分钟3秒1分钟30秒project 33分钟41秒1分钟34秒2.VUE3已经发布两年+，属于前端前沿的技术，牛客后续也需要考虑升级与行业前沿对接使用VUE3。与此同时，web...

一、背景 1.我们的技术栈相对比较统一，全部为Webpack+Vue+Typescript+Element-ui，基于以上情况，为了解决每条业务线重复配置打包脚本的问题，我们有一份统一的webpack打包配置脚本。 2.一些原因，这个打包脚本的启动、热更新、打包速度很慢，严重降低了前端开发同学的日常工作体验和前端开发效率。二、问题分析 虽然慢是普遍的，但是不同阶段的慢我们还是需要单独分析，分开处理。打包流程图启动在启动阶段，会进行全量的编译、构建，这个是webpack打包模式本身决定的，作为使用者无法修改（也有像Vite那样lazy的打包工具，但是那个就跳出Webpack优化...

一、背景1.阿里云效NPM仓库不稳定，流水线莫名出现第三方包找不到的问题，阿里云长时间未能解决。2.云效仓库突然对yarn的支持不友好，使用yarn装包频繁出现打包失败的问题，个别流水线必现。3.目前的npm包缺乏包相关的使用文档（类似于npm仓库，搜索包时会有包内的README使用说明）。二、私有仓库技术选型 常用的NPM私有服务一般基于三种框架：Verdaccio、Cnpm和Nenus。各个框架有如下特点NenusJava社区的一个方案，可以用于Maven、npm多重类型的仓库界面比较丑配置相对比较复杂Cnpm支持静态配置型用户管理机制分层模块权限设置公共模块镜像更新私有模块管理支持拓展多...