HTTP缓存相关头字段

1webcache的简单介绍

 web缓存,是一种 缓存技术 ,用于临时存储(缓存)的网页文件,如HTML页面和图像等静态资源,减少带宽以及后端服务器的压力,通常一个WebCache也是一个 反向代理软件 ,既可以通过缓存响应用户的请求,当本地没有缓存时,可以代理用户请求至后端主机。

WebCache分为正向和反向之分，一般正向WebCache不常用,这次主要以反向WebCache为主。

2webcache的由来

 1)由于程序具有局部性,而局部性分为： 时间局部性和空间局部性

A时间局部性是指：在单位时间内,大部分用户访问的数据只是热点数据(热点数据指经常被访问的数据)

B空间局部性是指：某新闻网站突然出来一个重大新闻,此新闻会被被反复访问。

3webcache的变化性

  WebCache的新鲜度监测机制 ：数据都是可变的,所以缓存中的内容要做新鲜度检测

4缓存相关的>在客户端向服务端发送>gzip压缩

gzip压缩效率很高，可以达到70%的压缩率

//npm i -D compression-webpack-plugin 安装插件依赖
configureWebpack: config => {
const CompressionPlugin = require('compression-webpack-plugin')
configpluginspush(new CompressionPlugin())
}
去掉consolelog

生产环境中，不需要打印日志。通过对webpack进行配置，打包时自动去掉consolelog

//npm i -D terser-webpack-plugin
configureWebpack:config =>{
const TerserPlugin = require('terser-webpack-pulugin')
configoptimzationminimizerpush(
new TerserPlugin({
extractComments:false,
terserOptions:{compress:{drop_console:true}} //插件配置项 移除console
})
)
}
去除SourceMap

代码压缩后进行调bug定位将非常困难，于是引入sourcemap记录压缩前后的位置信息记录，当产生错误时直接定位到未压缩前的位置，将大大的方便我们调试。

sourcemap附带了很多信息，如果build需要生成sourcemap，将会大大降低build的速度，还会增加包的体积。

//vue 中
moduleexports = {
productionSourceMap: false,
}

//react中
//打开webpackconfigprodjs
const shouldUseSourceMap = false
CDN

内容分发网络，它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。所以可以通过将资源部署在CDN上来提高响应速度，提高用户体验
预渲染

简单来说，就是将浏览器解析JavaScript动态渲染的工作，在打包阶段完成了（只构建了静态数据）。换个说法，在构建过程中，webpack通过使用prerender-spa-plugin插件生成静态结构的html

// 1、安装prerender-spa-plugin
npm install prerender-spa-plugin --save-dev

// 2、安装vue-meta-info
npm install vue-meta-info --save-dev
// 3、相关配置

// 预渲染配置：在webpackprodconf文件中加入
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPluginPuppeteerRenderer

// 在 plugins 中加入
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 下面这句话非常重要！！！
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: pathjoin(__dirname, '/dist'),

// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
routes: ['/', '/first', '/second', '/third', '/fourth', '/userCenter/userFirst','/userCenter/userSecond','/userCenter/userThird'],

// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
// headless: false,
renderAfterDocumentEvent: 'render-event', // 在 mainjs 中 documentdispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
args: ['--no-sandbox', '--disable-setuid-sandbox']
})
})

// 4、在mainjs中
import MetaInfo from 'vue-meta-info'

new Vue({
el: '#app',
router,
components: { App },
template: '',
// 添加mounted，不然不会执行预编译
mounted () {
documentdispatchEvent(new Event('render-event'))
}
})
注意：路由模式必须为 history ，如果不设置 history 模式，也能运行和生成文件，每个 indexhtml 文件的内容都会是一样的
Service Worker

ServiceWorker 是运行在浏览器后台进程里的一段 JS，它可以做许多事情，比如拦截客户端的请求、向客户端发送消息、向服务器发起请求等等，其中最重要的作用之一就是离线资源缓存。

ServiceWorker 拥有对缓存流程丰富灵活的控制能力，当页面请求到 ServiceWorker 时，ServiceWorker 同时请求缓存和网络，把缓存的内容直接给用户，而后覆盖缓存

注意：需要>