公司项目一般都是使用集团封装好的脚手架，脚手架内部实现咱看不到也摸不着，好不容易组内推行新的UI框架，需要自行定义webpack配置，这可是个绝佳的好机会，我对配置过程进行了梳理，把商业项目的成熟配置小跑着送上。 初始化 首先新建一个空文件夹，执行npminit初始化生成package.json文件。 创建src文件夹，项目的业务代码都放在这里，再创建index.js，这是项目的入口文件，待会使用webpack来打包项目，就从index.js文件开始。 大家都知道，webpack在开发和生产时部分配置是不同的，比如在开发时，我们希望代码能够即改即生效，能够立马在页面中看到效果，需要devSer...

npm存在的问题 我们经常使用npm来管理node项目中的包，从package.json中读取配置将依赖下载到本地，以保障项目的正常运行。 当项目数量多时，这样的包管理方式会非常的占用电脑内存。由于每个项目都有属于自己的依赖，每个项目都需要安装，即使npm会对依赖进行缓存，但是每个项目仍然需要安装到自己的node_modules文件夹下，此时每个项目安装的每一份依赖都会在磁盘中保存一份，即使各个项目中依赖的版本可能相同。 pnpm就是针对以上问题出现的解决方案，它使用统一的仓库来存放项目中的包，在项目中使用硬链接+软连接的方式找到依赖所在磁盘的位置。 硬链接和软连接 想要清晰的知道pnpm管...

如果希望自己的代码更优雅、可维护性更高以及更简洁，往往离不开设计模式这一解决方案。 在JS设计模式中，最核心的思想：封装变化（将变与不变分离，确保变化的部分灵活，不变的部分稳定）。 单例模式 那么来说说第一个常见的设计模式：单例模式。 单例模式保证一个类仅有一个实例，并提供一个访问它的全局访问方式，为了解决一个全局使用的类频繁被创建和销毁、占用内存的问题。 ES5中通过闭包 在ES5中，可以使用闭包（函数内部返回函数被外界变量所引用，导致这个函数里面的变量无法被释放，就构建成闭包）来保存这个类的实例。 varSingeton=(function(){ varinstance; funct...

因历史遗留原因，接手的项目没有代码提醒/格式化，包括eslint、pretttier，也没有commit提交校验，如husky、commitlint、stylelint，与其期待自己或者同事的代码写得完美无缺，不如通过一些工具来进行规范和约束。 eslint eslint是一个代码校验工具，用来规范项目代码风格。 初始化 通过npminstalleslint后使用npxeslint--init来根据问答生成.eslintrc.js配置文件。我的项目是React+JavaScript，这里选择了Airbnd的规则来校验，不同的项目类型可以进行其它的选择。配置详细介绍可以参考这一篇规范代码编写风格...

随着需求的不断开发，前端项目不断膨胀，业务提出：你们的首页加载也太慢啦，我都需要7、8秒才能看到内容，于是乎主管就让我联合后端开启优化专项，目标是3s内展示完全首页的内容。 性能指标 开启优化时，我们要清晰的知道现状和目标，以及我们采用什么样的手段，通过检测什么指标来查看到优化的过程。 结果指标 根据这个目标，我们可以选择一些性能指标，google提供了基于用户体验的性能指标，如FCP、LCP、FID、TTI、TBT、CLS等，也有指标更少新的用户体验量化方式WebVitals，只选取LCP、FID、CLS。 我们这次主要选择的指标是FCP、LCP。FCP表示着用户能最快看到页面内容的时间，...

背景介绍 我们存在着大量在PC页面通过表格看数据业务场景，表格又分为两种，一种是antd/fusion这种基于dom元素的表格，另一种是通过canvas绘制的类似excel的表格。 基于dom的表格功能丰富较为美观，能实现多表头、合并单元格和各种自定义渲染（如表格中渲染图形/按钮/进度条/单选框/输入框），以展示为主，不提供圈选、整列复制等功能。 canvas绘制的类excel外表朴素更为实用，大量数据渲染不卡顿，操作类似excel，能行/列选中，圈选、复制等功能。 两者使用场景有所差异，各有利弊，但业务方不希望一套系统中出现两种类型的交互，期望能将两种表格的优缺点进行融合，在美观的dom...