如何缓存JavaScript文件 解决Nginx下Pug与Vue页面切换加载慢问题

• 确认静态资源路径匹配规则：你当前Nginx配置仅对/dist/路径下的js、css、图片等静态资源配置了30天缓存，如果你的build.js没有存放在/dist/目录下，自然无法命中缓存规则。你可以调整静态资源路径匹配规则，或者将所有打包后的静态资源统一存放到/dist/目录下即可触发缓存。
• 配置带内容哈希的打包文件名：修改Webpack 3的output配置，给输出的js/css文件加上内容哈希后缀（例如build.[contenthash].js），只有当文件内容发生变更时文件名才会更新。你当前对根路径的index.html配置了no-store不缓存规则是合理的，搭配带哈希的静态资源文件名，既可以对静态资源设置长期缓存，也不用担心版本更新后用户拿不到最新资源。
• 补充完善缓存响应头：可以在静态资源的location块中补充缓存属性，进一步避免缓存失效：

location ~ ^/dist/(?:ico|css|js|gif|jpe?g|png)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

• 优化压缩策略：你当前已经开启了gzip压缩，3.8MB的js文件经gzip压缩后通常可以降到1MB左右，加载耗时会大幅缩短。如果条件允许可以额外配置Brotli压缩，相比gzip压缩率可以提升15%-20%，进一步减少资源体积。
• 代码拆分包：调整Webpack配置将单文件build.js拆分为多个子包：
  • 将Vue、Vuex、axios等几乎不会变动的第三方依赖单独打包为vendor包，这部分可以设置更久的缓存时间，用户仅需在第一次访问时加载
  • 按路由配置异步组件，用户访问对应页面时才加载对应业务代码，无需一次性加载全量Vue页面的代码
• 配置静态资源CDN：将静态资源托管到CDN节点，利用边缘节点缩短用户加载资源的物理距离，进一步降低加载耗时。

• 增加首屏loading占位：在index.html中内联简单的loading样式与结构，Vue资源加载完成渲染后再隐藏loading，避免用户跳转后看到长时间空白页面
• 旧页预加载资源：在旧的Pug页面中，为跳转到Vue页面的入口链接添加hover事件监听，用户hover到跳转入口时提前预加载build.js资源，用户点击跳转时资源已经加载完成，直接可以渲染页面。

内容的提问来源于stack exchange，提问作者Eran Sevil