前言
对于一个网站来说, 首页打开的速度一定程度上决定了用户的访问量和留存率,很显然,5G时代下的人们是缺乏耐心的,如果一个网页卡十几秒还没开, 估计会弃之,那么怎么才能提高这个速度, 以下提供了五种提升网站速度的方式.
查看网页性能
网上有很多查看性能优化的工具, 最简洁实用的就是chrome里的开发者工具 - network和preformance进行性能分析,另外在build的时候加上--report也能查看到打包后包的大小, 分析占用空间多的包进行优化.
运行npm run build --report, 生成report.html, 在浏览器打开就能看到如下图
1. 路由懒加载
❝什么是懒加载？
❞
懒加载也叫做延时加载，在网页响应时不立刻请求资源，待页面加载完毕或者按需响应时再加载资源，以达到提高页面响应速度以及节省服务器资源的谜底。网页中常用的懒加载是图片的懒加载，对于类似淘宝一样的多图页面，如果等待所有图片都下载完成再响应用不必然造成页面加载的卡顿。对于JS资源的加载也是同样的道理，大JS的加载会造成JS阻塞，页面出现停止响应的假死状态。因此可以通过按需加载的方式，提高页面首屏的加载速度.
使用: 按业务模块划分
{
path: '/manageGroup/add',
name: 'ManageAddGroup',
component: () => import(/* webpackChunkName: "manageGroupAdd" */ '/views/Personal/ZGMP/AddGroup/index.vue'),
},
{
path: '/privateChat/list',
name: 'PrivateChat',
component: () => import(/* webpackChunkName: "privateChat" */ '/views/Personal/PrivateChat/index.vue'),
},
{
path: '/privateChat/add',
name: 'PrivateChat',
component: () => import(/* webpackChunkName: "privateChat" */ '/views/Personal/PrivateChat/add.vue'),
},
注意: /* webpackChunkName: "privateChat"*/是vue-cli3模板提供的路由懒加载写法, 是指把PrivateChat文件夹下的index.vue和add.vue中的js代码提取到privateChat.[hash].js上，减少入口js文件的体积，提高加载性能。
验证: 是否配置成功
npm run build之后查看dist文件夹,如果有按路由配置里的文件生成对应文件说明配置成功.
解惑: 没生效?
加载首页时我的预期是只会加载app.js和首页路由相关文件,然而却看到了其他路由文件
难道是路由懒加载没生效?
真相是: 「预加载」
❝什么是预加载?
❞
prefetch: 一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。
preload：用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload
(webpack4.6.0以上支持prefetching 特性)
上面的privateChat这些文件属于prefetch，也就是预读取，这些文件加载基本不会影响到当前页面的打开，而且在读取完成后，可以降低页面跳转的等待时间，是一个非常好的功能.
可以看到size一栏里面显示的是prefetch cache, 即预读取缓存,而不是整个文件重新加载.
「那可以关闭/禁用prefetch吗?」 答案是「可以」
Prefetch 将会消耗带宽/流量。如果你的应用很大且有很多 async chunk，而用户主要使用的是对流量较敏感的移动端，那么你可能需要关掉 prefetch 并手动选择要提前获取的代码区块.
// vue.config.js
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 或者, 修改它的选项：
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || []
options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
return options
})
}
}
那怎么手动选择要预读取的文件呢?
import(/* webpackPrefetch: true */ './someAsyncComponent.vue')
这样就实现了按需预加载了.
2. 开启gzip压缩,加速资源请求速度
先安装插件compression-webpack-plugin,
npm i --save-dev compression-webpack-plugin
vue.config.js配置插件
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
module.exports = {
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
],
},
}
npm run build查看dist文件,如果看见多了一栏Gzipped则说明本地配置成功.
如果使用了nginx, 那么还需要在nginx.conf文件里面配置.
server {
listen 80;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
}
3.关闭sourceMap
sourcemap是为了方便线上调试用的，因为线上代码都是压缩过的，导致调试极为不便，而有了sourcemap，就等于加了个索引字典，出了问题可以定位到源代码的位置。
但是，这个玩意是每个js都带一个sourcemap，有时sourcemap会很大，拖累了整个项目加载速度，为了节省加载时间，我们将其关闭掉。
vue.config.js配置
productionSourceMap: false, //取消.map文件产生
4.不打包库文件
单页面应用加载慢,主要是打包后的js文件过大，阻塞加载, 比如chunk-vendor.js文件, 压缩前加载这个文件需要14秒,
那么如何减小js的体积呢？那就是把库文件单独拿出来加载，不要参与打包。
vue.config.js配置
与configureWebpack同级,配置如下:
chainWebpack: config => {
// 在这里设置 需要cdn的依赖和插件
config.set('externals', {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': "axios",
'moment': "moment",
});
//这是一个方法,对config进行了操作之后必须要return出来
return config
},
在public/index.html的head标签中可以引入如下的cdn地址: 这里提供一个免费cdn资源网站: bootcdn
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
❝注意:
❞
1.版本号一定要跟package.json中的一致,否则无效;
2.vue.config.js配置里的这个键值对需要注意下，配置错了这些大文件仍旧参与打包，导致优化失败。
键（key），就是package.json里的插件名称;
值（value），就是对外提供的那个对象，这个最好在引入前查看下js.
5.使用CDN加速
cdn加速推荐看这篇文章: Vue项目构建持续集成阿里云CDN
先写这么多了, 有空再补充完整.
