vue性能优化，也是vue面试的重点-基础的web技术层面

学习地址：https://mp.weixin.qq.com/s/l8isi43gxWqNRVjLgEGHkQ

vue性能优化可以从以下三个方面入手：

1. vue代码层
2. webpack配置层
3. 基础的web技术层面

上一篇：vue代码层优化和webpack配置层优化

开始

三：基础web技术层优化

1.开启gzip压缩

gzip是GNUzip的缩写，其作用是对系统文件进行压缩，方式如下；

安装插件：

npm install compression --save

在vue.config.js中

/const webpack = require('webpack');
//引入gzip 实现打包压缩，性能优化
const CompressionPlugin = require("compression-webpack-plugin");
//Gzip要压缩的文件类型
const productionGzipExp = ["js", "css", "html"];
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery",
            }),
            new CompressionPlugin({
                algorithm: "gzip",
                test: new RegExp("\\.(" + productionGzipExp.join("|") + ")$"),
                // test: /\.js$|\.html$|\.css/,
                threshold: 10240,//对超过10kb的进行压缩
                minRatio: 0.5,//压缩比例 0-1
                deleteOriginalAssets: false //是否删除原文件
            })
        ]
    },
}

重启服务，观察网络面板里面的 response header，如果看到如下红圈里的字段则表明 gzip 开启成功 ：

2.浏览器缓存

为了提高用户加载页面的速度，对静态资源进行缓存是非常必要的，根据是否需要重新向服务器发起请求来分类，将 HTTP 缓存规则分为两大类（强制缓存，对比缓存）

3.CDN的使用

浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器连接，而大部分服务器的带宽有限，如果超过限制，网页就半天反应不过来。而 CDN 可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加，且CDN 具有更好的可用性，更低的网络延迟和丢包率 。

感谢原作者分享。

再次发送原链接：https://mp.weixin.qq.com/s/l8isi43gxWqNRVjLgEGHkQ