使用 browserify 在浏览器中缓存答案

【问题标题】：Cache in browser with browserify使用 browserify 在浏览器中缓存
【发布时间】：2016-01-02 05:49:37
【问题描述】：

如果我使用 CDN 通过多个“脚本”标签向我的客户端提供 jquery 或 react 等 .js 库，则浏览器会缓存这些文件，然后再使用它们，而不是再次请求它们以加快初始加载时间。

使用 browserify 所有的 .js 库都捆绑到一个 .js 文件中，所以客户端不需要每次都下载整个 .js 包吗？这不会使初始加载时间变慢吗？

例子，

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js')>
//get from cache if present
<script src='mycomponents.js'> // should get from server

使用 browserify ，

<script src='mybundle.js'> // 包括 jquery + mycomponents ，总是来自服务器

【问题讨论】：

标签： browser browserify browser-cache cdn

【解决方案1】：

根据您使用的服务器，它会告诉客户端的浏览器是否可以从缓存中提供文件。通常，如果您的脚本被修改（这意味着任何捆绑的脚本），或者当它是第一次访问时，客户端需要请求整个捆绑包。如果没有，它会发送304状态码，表示可以使用缓存的文件。

如果您使用CDN，客户端很可能不需要下载所有依赖项，因为他可能在访问其他网站时已经缓存了它们。在第一次访问或更新时，唯一要下载的文件是组件的脚本，它可能会更频繁地更新，或者缓存会更快过期。

Browserify 有利于生产力和依赖管理。如果您正在寻找性能，我建议您使用 CDN。

但请记住，CDN 可能会失败，因此最好在您的服务器上使用故障转移脚本

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script>if (typeof jQuery === "undefined") { document.write('<script src="assets/js/jquery.min.js">\x3C/script>') }</script>

【讨论】：

【解决方案2】：

CDN 的缓存标头配置方式意味着浏览器不必每次都下载文件。

如果您希望浏览器缓存它们，您可以使用显示的标头 on this page 来提供您的资产。

【讨论】：