本项目是淘系用户增长团队的一个大中台系统，单页应用，涵盖很多业务功能，运用了很多懒加载页面组件来提升性能，首屏时间 1s 左右，体验良好。然而大项目文件很多，导致构建和发布时间很长，内存占用较大。我的任务是尽可能优化与此相关的问题。 首先不难发现问题并不在用户体验上，而在于开发…

前端小伙伴都知道，为了降低包大小，经常会把依赖的前端模块独立打包，比如把 vue、vue-router 打到一个单独的包 vendor 中。另外，常会将存在多个路由的复杂页面的每个页面都单独打一个包，只有访问某个页面的时候，再去下载该页面的js包，以此来加快首页的渲染。 无论是…

团队使用 TypeScript 进行 React 组件开发。开发组件的同时，需要为组件撰写文档（使用 Markdown 编写文档）。文档中需要对组件的 props 定义进行说明。 在开发组件的时候，是编写组件 props 的接口定义。这时候就希望能够偷懒了，直接抽取组件源代码中…

如何实现多个独立项目间的组件共享？联邦模块（Module Federation）是webpack5提供的一个新特性，通过它你只需要几行配置就可以实现，它让我们的可以更加优雅的实现跨应用的代码共享。

Tree-Shaking这个名词，很多前端coder已经耳熟能详了，它代表的大意就是删除没用到的代码。这样的功能对于构建大型应用时是非常好的，因为日常开发经常需要引用各种库。但大多时候仅仅使用了这些库的某些部分，并非需要全部，此时Tree-Shaking如果能帮助我们删除掉没有…

如果通过发布后，再安装，然后调试这个步骤去调试自己开发的 npm 包的话，估计已经崩溃了。 使用 npm link 来调试， npm link 它首先创建一个全局链接，然后将全局安装目标链接到项目的node_modules文件夹中。从而让你开发的 npm 包和你的项目依赖关联上…

先抛出一个尖锐问题：MPA 多页应用或微前端架构，如何处理页面的公共部分。 引入公共模板，这样在访问页面时会直接渲染公共部分。 但如果是现代化工程（比如 React），可前后端又未分离的MPA项目（页面仍由后端渲染，Dom 渲染交由 React 接管），我们就会将构建后的资源文…

周一入职，同事JJ让我熟悉一下基于React的新项目。 “咦，yarn是什么鬼？难道npm更高级的替代品？为什么要替代npm？难道有什么好的地方？”，内心一连串的问题冒出来。我就默默的问了一下JJ：“yarn是跟npm一样的东西吗？”，“嗯。”JJ忙碌的敲着键盘，显然这个问题不…

公司的前端构建及部署工作都是人工去做，随着业务扩大，项目迭代速度变快，人员增多，各种问题都暴露出来，本文是对前端自动化工作流进行探索后的一篇经验分享，将通过一个简单案例分享一下基于Jenkins的前端自动化工作流搭建的过程，搭建完这套工作流，我们只需要在本地发起一个git提交，…