1. 发包压缩(gzip压缩)
主要是压缩你js的资源大小
a) 引入 compression webpack plugin 插件
npm i -D compression-webpack-plugin
b) vue cli3.0 可在vue.config.js中 如下配置:
const path = require("path");
const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件
const webpack = require("webpack");
// vue.config.js
module.exports = {
//基本路径(相对于服务器根目录 静态资源的相对路径)
publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/", //font scss资源路径 不同环境切换控制
productionSourceMap:false,//打包时不要map文件
//输出文件目录
outputDir: "dist",
//是否在保存的时候检查
lintOnSave: true,
//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: 'statick',
devServer: {
// host: 'localhost',
// host: "0.0.0.0",
// https: false, // https:{type:Boolean}
// open: true, //配置自动启动浏览器 http://172.16.1.12:7071/rest/mcdPhoneBar/
// hotOnly: true, // 热更新
port: 8090
// proxy:{
// '/': {
// target: 'http://192.168.0.125:3000/',
// changeOrigin: true,
// pathRewrite: {}
// },
},
configureWebpack: {//引入jquery
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
}),
new CompressionPlugin({//gzip压缩配置
test:/\.js$|\.html$|\.css/,//匹配文件名
threshold:10240,//对超过10kb的数据进行压缩
deleteOriginalAssets:false,//是否删除原文件
})
]
},
};
一般浏览器都已支持.gz的资源文件,在http请求的Request Headers 中能看到 Accept-Encoding:gzip, 另外,要使服务器返回.gz文件,还需要对服务器进行配置,根据Request Headers的Accept-Encoding标签进行鉴别,如果支持gzip就返回.gz文件。
2. 懒加载
a) 资源懒加载
懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。
方法一:第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟.
方法二:是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
方法三:可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片。
b)路由懒加载
最简单的方式就是在 router.js 中 使用component:()=> import('xxx.vue')
3. CDN加速
CDN加速的原理:
- 用户在浏览器中输入要访问的域名。
- 浏览器向DNS服务器请求对域名进行解析。由于CDN对域名解析进行了调整,DNS服务器会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。
- CDN的DNS服务器将CDN的负载均衡设备IP地址返回给用户。
- 用户向CDN的负载均衡设备发起内容URL访问请求。
- CDN负载均衡设备会为用户选择一台合适的缓存服务器提供服务。
选择的依据包括:
根据用户IP地址,判断哪一台服务器距离用户最近;
根据用户所请求的URL中携带的内容名称,判断哪一台服务器上有用户所需内容;
查询各个服务器的负载情况,判断哪一台服务器的负载较小。
基于以上这些依据的综合分析之后,负载均衡设置会把缓存服务器的IP地址返回给用户。 - 用户向缓存服务器发出请求。
- 缓存服务器响应用户请求,将用户所需内容传送到用户。
如果这台缓存服务器上并没有用户想要的内容,而负载均衡设备依然将它分配给了用户,那么这台服务器就要向它的上一级缓存服务器请求内容,直至追溯到网站的源服务器将内容拉取到本地。
说人话就是,古代君主会在各个重要的城市把手重兵,以缓解一旦打仗部队不能及时调用的问题。请求就像打仗,客户输入网址就是来打仗,皇帝需要把最近的兵力分配到客户出一样。
做法:把所有需要的静态资源(如:jquery,vue等)用script标签引入。当然,引入地址需要是一个静态库。另外,一旦使用第三方的CDN,需要考虑网络的可到达性。这些内容既然是Host在别人的服务器上面,那么从一定意义上说,并非很可控。
感谢以下大佬指点,如有不妥可联系删除
https://www.cnblogs.com/webhmy/p/10208833.html
https://my.oschina.net/u/4337909/blog/3496949