Vue网站性能优化

背景

公司的M站采用 vue 技术栈开发，为单页面应用，随着页面数量的增加，网站打包后的体积不断增大，访问网站时加载的资源体积也不断增大，造成首屏白屏的时间过长，这种现象在APP内嵌H5页面比较明显，所以有必要对M站进行优化，提升用户体验。下图可以看到目前M站页面打开时需要加载的js文件，其中体积最大的文件达到了1.3M，在网络环境比较弱的环境下，在APP内打开M站的页面，可以很明显得感觉到加载慢，具体表现为白屏时间过长。

可优化的点

路由懒加载、组件按需加载

大多数情况下，用户在访问我们网站的时候，并不需要加载网站的所有js文件，所以可以采用路由懒加载和组件按需加载，也就是让用户在打开页面时只加载当前页面所需要的js，当前页面不需要的js不进行加载，底层原理是通过webpack实现对 chunk-vendors.b9bb840a.js 和 index.abb2a6cc.js 文件的代码分割和延迟加载，如下图可以看到路由懒加载和组件按需加载后的效果：

很明显 chunk-vendors.5717ca3f.js 加载的体积已经从1.3M下降到443k，减少了超过50%的体积，打开网站也明显快了很多。

启用 gzip 压缩从服务端获取资源

gzip 压缩是一种 http 请求优化方式，通过减少文件体积来提高加载速度。浏览器默认都是支持 gzip 的，在 http 请求的 Request Headers 中可以看到 Accept-Encoding: gzip，表示请求资源时，服务端可以返回 gz 格式的文件到浏览器，由浏览器进行解压，所以可以大幅减小打开页面时加载的文件体积。

Vue 项目打包要启用 gzip，需要先安装依赖 compression-webpack-plugin ,然后修改打包配置文件 vue.config.js，添加如下图所示配置:

const pages = require('./src/pages.config')
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
    productionSourceMap: false,
    pages,
    lintOnSave: undefined,
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.plugins.push(
                new CompressionWebpackPlugin({
                    test: /\.(js|css|svg|ico|woff|ttf|json|html|txt)$/,
                    threshold: 10240,
                    deleteOriginalAssets: false
                })
            )
        }
    }
}

可以看到打包后的文件会多一个 gz 格式的文件：

然后页面请求资源的时候，服务端也就直接返回 gz 格式的文件：

通过以上两项优化，网站的加载性能得到明显提升，当然如果还要进一步优化的话，我们可以使用cdn托管静态资源js和css，图片启用WebP格式等。