1、开启gzip压缩，浏览器是可以识别gzip压缩的。现在的服务基本上都使用nginx做转发，开启gzip也是很容易。只需配置如下代码：
server {
gzip on;
gzip_types text/xml text/css text/plain text/javascript application/javascript application/x-javascript;
}
2、浏览器缓存，缓存分为2种，一种是强缓存，一种是弱缓存。弱缓存不需要我们自己配置。弱缓存就是在第二次请求中，会携带在浏览器的请求头里的Last-Modified属性去对比，当nginx的时间在这个时间之前，那么就说明当前资源并没有产生变化。返回的状态码也就是304。这里需要注意的是浏览器最终是调用的缓存，但是仍然存在http请求来确认缓存资源是否失败，所以很明显还有另外的一种方式让浏览器可以直接调用缓存，不需要通过http请求，这就是强缓存。强缓存在nginx中可以通过如下代码配置：
location ~* \.(css|js)$ {
proxy_set_header Host $host;
proxy_pass http://tomcat_xxx;
expires 7d;
}
location ~* \.(jpg|jpeg|png|gif|webp)$ {
proxy_set_header Host $host;
proxy_pass http://tomcat_xxx;
expires 30d;
}
注意这里使用的是tomcat。
设置好以后，浏览器的相应头中会附带一个max-age = xxxxx，当再次刷新后浏览器状态码依然是200，但是后面多了一个from memory cache表明是从内存中直接取出缓存，并没有发送http请求。
3、对于关键资源的优先加载与非关键预加载（首页）
如使用的技术栈是vue，那就要优化路由的懒加载，也就是说只有切换到当前路由时才去请求当前路由下的资源。vue-cli配置就很简单，只需在router中更改一下import的方式就可以：
const router = new Router({
routes: [
{ path:'/', redirect:'/a', },
{ path:'/a', component: () => import('../components/a/index.vue'), },
{ path:'/b', component: () => import('../components/b/index.vue'), }
]
就算是这样也还是优化空间的，假如现在请求路由a，加载了公共的js文件和自己本身的js文件，那么在访问a路由页面的空余时间里，为什么不将b路由的js也对应加载到浏览器缓存当中呢？
这里就需要webpack的一个插件，PreloadWebpackPlugin，这个插件的作用就是帮助我们对应的生成<link rel='preload' href='xxxxx'></link>与
<link rel='prefetch' href='xxxxx'></link>标签，其中preload中的href的资源浏览器会优先加载，而对于prefetch的href浏览器会进行预加载。
对于vue-cli生成的项目就需要用preload加载vendor，manifest和app三个js文件，用prefetch去加载所有路由对应的文件。这样当我们访问路由a时会首先下载需要的js和css，然后浏览器会自动加载其他的路由文件。
在webpack.prod.conf.js中加入以下代码，至于img，font等这类资源就自己配置下吧。此处只有js和css
new PreloadWebpackPlugin({
rel:'prefetch'
}),
new PreloadWebpackPlugin({
rel:'preload',
as(entry) {
if(/\.css$/.test(entry))return'style'
return'script';
},
include: ['app','vendor','manifest']
})
注意代码放到new HtmlWebpackPlugin()的下方。
网友评论