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格式等。