在使用 React开发组件时经常会有一些苦恼，比如当一个组件的复杂度逐步上升时，它所拥有的状态不容易追溯；当需要查看某种状态的组件时，可能需要手动更改组件的属性或是更改接口返回的数据（数据驱动的组件）等等。于是我就去了解并学习 Storybook，然后组织了一次分享会，这也是我们团队的第一次技术分享。
关于 Storybook，我在一两年前有接触并尝试使用，当时对组件化开发的理解可能有限，只是为了用而用，并未感受到它的实用之处；加上经过多次的迭代，Storybook已经到了 6.0 版本，可以说是更易用、更优雅了。
上图是分享会 ppt 的封面，感兴趣的同学可以私信我，接下来进入正题。
背景
这次新项目的落地主要经历了以下三个阶段
上篇文章讲到如何使用 webpack5 从 0 到 1 搭建项目，没有看过的可以点击链接前往食用。花了几天时间开发完项目，很开心地运行打包命令并准备将其部署到服务器，结果打包完惊呆了，发现包的大小是5.59M，打包时间花了15s，这明显是有问题的，有强迫症的我决定对其进行一个比较正式的优化，优化完成后包的大小是559.67KB，打包时间花了6.34s，优化效果还是很明显的；另外我这个项目是一个小项目，只花了两三天的开发时间，优化效果可能不是很明显，但是对于比较大的项目，应用了以下我总结的可优化的点后，理论上优化效果是很可观的。
接下来我会围绕 webpack 优化进行讲述，其中也会作某些原理性地解释，尽量做到让大家知道为什么这么做，以及这么做的结果是什么。不同于 webpack4 及其以前的版本，webpack5 自身处理了很多优化性的东西，很多以前在 4 中被广泛使用的插件在 5 中已经用不到了，这一点需要特别注意。废话不多说，让我们开始吧。
在这之前，每开始一个新项目我都是使用现有的脚手架，这非常便于快速地启动一个新项目，而且通用的脚手架通常考虑地更加全面，也有利于项目的稳定开发；不过对于一个小项目，根据需求自己搭建可能会更好，一方面小项目不需要脚手架那么丰富的功能，另一方面可以提高对项目的掌控度以方便后期的扩展。
这篇文章是在实践中总结的，具有实操性，读者可跟着一步步进行搭建，中间我会穿插一些原理，当然因为笔者的能力有限，不会特别深入。
预备知识
