vue性能优化的那些事
首屏性能优化
vue项目进行性能优化,可以从以下几个方面入手:
- 优化打包体积
- 路由懒加载
- 图片懒加载
- 静态资源CDN
接下来,让我们来一一聊下:
优化项目打包体积
这个就不用赘述了,.原理就是通过webpack进行一个gzip打包
路由懒加载
路由懒加载就是在我们使用到这个路由的时候才去加载
在router.js中
以前是:
import Home from '../views/Home.vue'
{
path: "/login",
name: "login",
component: Home,
meta: {
title: "登录页",
},
}换成懒加载
{
path: "/login",
name: "login",
component: () => import("../views/login/login.vue"),
meta: {
title: "登录页",
},
}图片懒加载
我在网上看到的一个比较不错的方案是
<img src="https://i.loli.net/2017/08/08/5989307b6c87b.gif" data-xxx="${data.content[i].url}">
let images = document.querySelectorAll('img[data-xxx]')
for(let i = 0; i <images.length; i++){
if(/* 出现在屏幕里(images[i]) */){
// 一般判断这个高度用到高度有:浏览器高度,文档高度,滚动的高度
images[i].src = images[i].getAttribute('data-xxx')
images[i].removeAttribute('data-xxx')
}
}静态资源CDN
网站上所有的静态图片以及css和公用的js文件(如jq)都可以放cdn上面,图片这些完全可以上传到OSS对象存储上去,然后前端一个url引用就可以了.
vue打包优化
屏蔽掉项目的console.log
为什么需要过滤console.log?
在我们日常的开发过程中,console.log经常用于打印变量或者日志.但是当我们打包项目进行部署的时候,这些东西肯定不希望被用户看到,所以肯定要先把所有的console.log删除,如果我们一个一个console删的话,是非常大的工作量,幸好,我们可以通过很简单的配置就可以在打包项目的时候屏蔽掉所有的console
如何进行配置?
1.安装插件
npm install terser-webpack-plugin --save-dev
2.配置vue.config.js
打开根目录下的vue.config.js,如果没有就新建个.添加以下配置:
module.export = {
configureWebpack: (config)=> {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
}
}
}优化打包体积
打包过vue项目的同学都知道,一个很简单的页面,打包出来的js也可能到几百k,如果是稍微大点的项目,那可不得了,瞬间到几M大.很明显,用户请求这么大的资源会严重影响体验,所以,有没有一个办法可以将我们打包后的体积缩小呢?有,那就是gzip.
前端需要干的事情
首先安装compression-webpack-plugin npm i compression-webpack-plugin
然后,到前端项目根目录的vue.config.js中去引入插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']然后添加配置
configureWebpack: (config) => {
if (process.env.NODE_ENV === "production") {
config.plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
threshold: 10240,
minRatio: 0.8,
})
);
}
}完整的配置是:
const path = require("path");
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {
...
configureWebpack: (config) => {
// 压缩打包
if (process.env.NODE_ENV === "production") {
config.plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
threshold: 10240,
minRatio: 0.8,
})
);
}
}
...
};前端需要做的事情就这些,然后就可以开心的npm run build
可以发现
File Size Gzipped
dist\js\chunk-vendors.c7009e9b.js 819.98 KiB 219.07 KiB
dist\js\chunk-a01fb474.0382d40e.js 362.91 KiB 124.43 KiB
dist\js\chunk-23562f52.3e2452a7.js 29.79 KiB 12.49 KiB
dist\js\app.0dc23b38.js 6.16 KiB 2.50 KiB
dist\js\chunk-0b48facb.ba5d6037.js 2.83 KiB 1.21 KiB
dist\js\chunk-eb4844f4.01be346c.js 0.49 KiB 0.34 KiB
dist\js\chunk-2d0e93d2.b5a32012.js 0.31 KiB 0.26 KiB
dist\js\chunk-2d0c8d95.13101597.js 0.31 KiB 0.26 KiB
dist\js\chunk-2d0c795c.78156126.js 0.29 KiB 0.24 KiB
dist\lib\env.js 0.06 KiB 0.08 KiB
dist\css\app.5f0aaa59.css 241.31 KiB 44.11 KiB
dist\css\chunk-23562f52.d3405d23.css 1.94 KiB 0.64 KiB
dist\css\chunk-0b48facb.76a5254c.css 1.92 KiB 0.60 KiB
dist\css\chunk-eb4844f4.679c8099.css 0.08 KiB 0.08 KiB压缩效率是非常高的,可以大大的节省我们在浏览器中加载页面的时间
后端需要做的事情
当然,前端打包成了gz格式的文件,Nginx是需要配置才能生效的
打开Nginx安装目录的config下的nginx.conf
http:{
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg
image/gif image/png;
}配置完后,记得重启
