雨浣潇湘

为了提升页面加载性能，改善用户体验，我们希望我们的静态资源能够长期缓存在用户的浏览器中，为此，我们通常会给静态资源设置一个较长的 max-age ，而在资源内容有更新时，则生成一个名字不同的新文件，以便用户能够及时收到最新的内容。 我们都知道， HTTP 缓存可以分为强缓存和协商缓存，根据我们的配置，强缓存过期后，浏览器会向服务器发出一个校验请求，如果服务器判断资源没有更新过，则通知浏览器使... 阅读全文…

node 模块现状在我们执行 npm install 时，npm 会做出如下操作： 向 registry 查询获取模块的地址 根据 package.json 中的配置确定需要安装的模块版本 下载对应的压缩包，存放在 ~/.npm 目录 解压压缩包到当前项目的 node_modules 目录 而在 Node.js 中，我们提供给 require 方法的参数如果不是一个路径，也不是 node... 阅读全文…

我们知道，ES2015+ 在低版本浏览器中存在严重的兼容问题，为此前人们尝试了各种方式： Shim/Sham在远古时代的代码中，我们可能看到过这样的处理： 12<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/0.34.2/es5-shim.min.js"></script><script ... 阅读全文…

本文基于 Webpack@4.28.3 版本 在现代前端工程中，为了更有效的利用浏览器和 CDN 的缓存，我们通常会给静态资源设置一个比较长的缓存时间（cache-control等），在有内容更新的时候，通过在静态资源路径中加入 hash 的方式来实现。具体可以参考这里： 大公司里怎样开发和部署前端代码？。 但是在 Webpack 中，实现可靠的长期缓存并不容易。在 github 上，关... 阅读全文…

最近看到了美团的前端团队的一篇文章，文中提到前端发布仅需10秒，默默的看了一下我们自己的发布时间。。。 先定一个小目标，争取把 Webpack 的打包时间优化到10秒以内吧。 先看一下现在打包一次需要的时间，73013ms，下面开始一步一步见证奇迹： ... 阅读全文…

常用命令1$ npm init / install / uninstall / update 12$ npm ls$ npm list -g --depth 0 12npm config set proxy xxx.comnpm config list 1234$ npm outdatedPackage Current ... 阅读全文…

BBR 是 Google 提出的一种新型拥塞控制算法，可以使 Linux 服务器显著地提高吞吐量和减少 TCP 连接的延迟。 升级内核开启 BBR 要求 4.10 以上版本 Linux 内核，可使用如下命令查看当前内核版本： 1uname -r 可以得到类似如下的结果： 13.10.0-514.10.2.el7.x86_64 如果当前内核版本低于 4.10，可使用 ELRepo 源更新：12... 阅读全文…

1月25日，Webpack 发布了 4.0.0-beta.0 版本，做了较大改动。我们第一时间来体验一下。 安装1npm install webpack@next webpack-cli --save-dev Webpack 团队切出了 next 分支来开发 Webpack 4，原有的 master 分支将继续 3.x 版本的维护。 新特性大幅度提升了构建性能 默认情况下，使用 produ... 阅读全文…

域名发散在PC时代，为了保护服务器，浏览器对最大并发数进行了限制，例如 Firefox46 中每一域名下最大连接数为6，IE10 下为8。为了突破这一限制，可以将静态资源置于多个域名下，来提高并发数，使得资源加载速度更快。同时，可以将不需要发送 Cookie 的请求与主域区分开，可以有效减小请求头大小，使得传输速度更快。 域名收敛我们知道，在浏览器地址栏内输入一个域名并回车以后，第一步执行的... 阅读全文…

随着项目的发展，项目目录会越来越大，各种库也会越来越多，会直接导致Webpack的构建效率极低，比如下面的例子：1234567$ webpackHash: 6aa4a418e100b6563347Version: webpack 3.5.5Time: 20199ms Asset Size Chunks Chunk Namesindex.js 4.2... 阅读全文…