前端性能优化

基础优化

像代码优化，避免使用复杂的 js css 代码，善用keep-alive，减少重复沉余操作等等基础的优化这里就不详细说啦，但同样重要！

今天主要讲一下几种优化项目的方式。

路由懒加载（很重要）

配置路由各位前端得伙伴应该不陌生吧，但配置路由假如用的时一般加载，如果项目得模块少还好，要是十几个，再大点几十个上百个，一下子把所有组件都加载一遍，估计等项目加载完用户都怀疑是不是网络出问题了，自己开发预览也会很难受吧。

//一般加载
import component1 from "....."
{
  // path:
  // name:
  component:component1
}

//懒加载
{
  // path:
  // name:
  component:()=>import('.....')
}
//import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。

其实项目编译打包后，会把每个路由组件的代码分割成一一个 js 文件，初始化时不会加载这些 js 文件，只有当激活路由组件才会去加载对应的js文件。

gzip静态资源压缩

有些文件确实不能再优化了，那我们是不是可以考虑把它压缩了呢。

其实原理很简单，开启gzip压缩把那些大得js，css文件进行压缩，压缩比率在3到10倍左右，这样从服务器获取数据的时候（需要服务器配置），再由浏览器去解压加载，这样可以大大节省服务器的网络带宽，提高资源获取的速度。

不同的脚手架可能配置不太一样，但都大同小异，我这里用的是webpack，大家可以参考一下。

打开config/index.js文件

//找到下面啊的代码   
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,    //把这里改成true
    productionGzipExtensions: ['js', 'css'],

然后安装依赖：

npm install --save-dev compression-webpack-plugin@1.1.12  //注意高版本安装可能会报错，不过不确定是不是高版本不适配的原因，这里指定版本@1.1.12

打开/build/webpack.base.config.js文件，找到module.exports的module中的rules,把limit从10000改小一点，这里改成1000

    module: {
        rules: [{
                test: /\.scss?$/,
                loaders: ["style", "css", "sass"]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 1000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 1000,    
                    name: utils.assetsPath('media/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 1000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }
        ]
    },

为什么要改这里呢？

因为 vue 中一些小的静态资源文件是会打包成base64的文件存在css中的或者js中，这里就是控制需要转换的大小，这样减少了js的大小。

服务器端(下面以Nginx为例)

打开配置文件

一般都会默认开启gzip的，但是gzip_static 是没有开启的，所有需要加上 gzip_static on;

如果没有开启gzip的话可以在手动在http{}里添加

http {
    gzip on;
    gzip_static on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript         
    text/javascript text/css application/xml;
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";
}

webpack 的 Gzip 和服务端的 Gzip

其实服务端配置好Gzip就可以实现用户向服务器请求，服务器把资源压缩发送了，那为什么webpack也要设置呢?主要是为了减轻服务器压缩资源的负担，如果我们生产环境的资源本身就是压缩了的，那么服务器就不用压缩啦，自然就减轻了服务端的压力。建议两边都配置一下。

减少HTTP请求

不影响需求的前提下，尽可能减少http请求

改善响应时间最简单，最直接的途径当是较少 http 请求啦，有一些一个链接能搞定的就不要分几个链接来请求，也可以用巧用一些缓存来避免重复的http请求。

使用CDN

如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。

CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。

CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。

CDN的缺点：

1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。

2、如果CDN服务质量下降了，那么你的工作质量也将下降

3、无法直接控制组件服务器

按需加载第三方库

有时候我们开发的页面白屏时间长，打开开发者工具，看 network 那里，一般都是 vender.js 这个资源获取时间长达几s，第三方库一般都会打包到 vender.js ，就像我们常用到的 element.ui ，其实它的库是很大的，一般不设置都是整个库加载上来，自然加载慢了。我们可以把第三方库通过 CDN 的方式引入第三方库，这样vendor.js会减少，大大提升首屏加载速度，具体怎么使用大家可以搜一下，这里就不详细介绍啦。

图片压缩

这个是我自己以身示范的一个坑，在一个项目的登录界面我用了一张照片做背景，后来发现每次加载登录的界面都是超级慢，细究才发现，我这张照片10几m…加载时间自然短不了，所以照片压缩很必要。

参考链接

1. Web前端性能优化——如何提高页面加载速度
2. vue项目webpack打包app.js文件太大导致首次加载非常缓慢的解决方案