使用 Create React App 创建 UI 组件库的前端工程环境。 参数 react_scripts 用来告诉 Storybook 当前项目使用 Create React App 创建的，Storybook会根据该参数来自动安装合适的包。 addon-info 插件会自…

编译原理科普文，编译是什么，转译器、编译器、解释器的区别是啥，编译流程都做了什么，前端领域哪些地方用到编译技术。

由于去年的烧烤摊营收达预期，烧烤哥给自己买了台新电脑。但新电脑上啥都没有，导致晚上收摊后回去无法加班，很是苦恼。 为了不影响烧烤摊今年的业绩，烧烤哥还是在自己的游戏本（玩游戏的本子）上搭起了一个前端开发环境。 我们先来捋一捋，烧烤哥的业务涉及到web开发、taro小程序。所以只…

前几个月写的一篇文章，还没在掘金发过。 平时在使用 antd、element 等组件库的时候，都会使用到一个 Babel 插件：babel-plugin-import，这篇文章通过例子和分析源码简单说一下这个插件做了一些什么事情，并且实现一个最小可用版本。 antd 和 ele…

闲来无事，研究一下SSR，主要原因在于上周一位后端同学在一次组内技术分享的时候说，对前后端分离、服务端渲染特别感兴趣，在他分享了后端微服务之后，专门点名邀请我下周分享服务端渲染，然后我还没同意，领导就内定让我下周分享了（其实就是下周愿意下周分享，我是那个替死鬼）。 解析HTML…

一. 什么是Tree-shaking 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当…

一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.location.reload()。 另一种是基于WDS (Webpack-dev-server)的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。…

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

在上两章节中我们已经介绍过了 JavaScript 打包机制 以及 webpack 所有的内置配置，但当项目业务功能达到一定规模时，默认的配置已经不足以满足开发、用户的期望，我们就需要对 webpack 配置进行优化。 如何知道具体该如何优化喃，最直观的方式是分析它的输出文件，…