4.10 提取公共代码
问题一：为什么需要提取公共代码？
大型网站通常会由多个页面组成，每个页面都是一个独立的单页应用。 但由于所有页面都采用同样的技术栈，以及使用同一套样式代码，这导致这些页面之间有很多相同的代码。
如果每个页面的代码都把这些公共的部分包含进去，会造成以下问题：
相同的资源被重复的加载，浪费用户的流量和服务器的成本；
每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。
如果把多个页面公共的代码抽离成单独的文件，就能优化以上问题。 原因是假如用户访问了网站的其中一个网页，那么访问这个网站下的其它网页的概率将非常大。 在用户第一次访问后，这些页面公共代码的文件已经被浏览器缓存起来，在用户切换到其它页面时，存放公共代码的文件就不会再重新加载，而是直接从缓存中获取。 这样做后有如下好处：
减少网络传输流量，降低服务器成本；
虽然用户第一次打开网站的速度得不到优化，但之后访问其它页面的速度将大大提升。
问题二：如何提取公共代码？
根据你网站所使用的技术栈，找出网站所有页面都需要用到的基础库，以采用 React 技术栈的网站为例，所有页面都会依赖 react、react-dom 等库，把它们提取到一个单独的文件。 一般把这个文件叫做base.js，因为它包含所有网页的基础运行环境；
在剔除了各个页面中被base.js包含的部分代码外，再找出所有页面都依赖的公共部分的代码提取出来放到common.js中去。
再为每个网页都生成一个单独的文件，这个文件中不再包含base.js和common.js中包含的部分，而只包含各个页面单独需要的部分代码。
问题三：既然能找出所有页面都依赖的公共代码，并提取出来放到common.js中去，为什么还需要再把网站所有页面都需要用到的基础库提取到base.js去呢？
原因是为了长期的缓存base.js这个文件。
发布到线上的文件都会采用在CDN加速的方法，对静态文件的文件名都附加根据文件内容计算出 Hash 值，也就是最终base.js的文件名会变成base_3b1682ac.js，以长期缓存文件。 网站通常会不断的更新发布，每次发布都会导致common.js和各个网页的 JavaScript 文件都会因为文件内容发生变化而导致其 Hash 值被更新，也就是缓存被更新。
把所有页面都需要用到的基础库提取到base.js的好处在于只要不升级基础库的版本，base.js的文件内容就不会变化，Hash 值不会被更新，缓存就不会被更新。 每次发布浏览器都会使用被缓存的base.js文件，而不用去重新下载base.js文件。 由于base.js通常会很大，这对提升网页加速速度能起到很大的效果。
