导航

vue提升首屏加载速度 提升90%加载速度——vuecli下的首屏性能优化

日期:2022-06-25 21:04:57 点击量:138 作者:管理员

前言

之前用做了个博客,是一个单页面项目,大概有十个路由直接npm run build打包出来,有一个1M的巨大js文件

vue提升首屏加载速度_vue 页面加载完成事件_vue首页加载

先挂载到服务器上试试好家伙 这加载时间 仿佛过了半个世纪

vue提升首屏加载速度_vue首页加载_vue 页面加载完成事件

首屏页面整整加载了9s 光加载那个大文件就花了8s这必须得做个优化了,没有用户能忍受9s的白屏而不关闭页面的

过程中,我还顺便把项目从 2.x迁移到了 3,所以接下来还会介绍一些它们在优化上的异同

分析

2.x自带了分析工具只要运行npm run build --

如果是 3的话,先安装插件

cnpm install webpack-bundle-analyzer –save-dev
复制代码

然后在vue..js中对进行配置

chainWebpack: (config) => {
    /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
        if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                .end();
            config.plugins.delete('prefetch')
        }
    } }
复制代码

再运行npm run build --

会在浏览器打开一个项目打包的情况图,便于直观地比较各个文件的大小

vue 页面加载完成事件_vue首页加载_vue提升首屏加载速度

可以看到 项目中所有的依赖,所有的路由,都被打包进了同一个文件中

另外,在浏览器中,也可以通过来查看代码的使用状况

vue首页加载_vue提升首屏加载速度_vue 页面加载完成事件

红色的是下载了但未使用的部分路由懒加载

当打包构建应用时,包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

在一开始就下载完所有路由对应的组件文件,这明显是不合适的,这就像下载一个app了,所以我们就需要使用路由懒加载

vue首页加载_vue 页面加载完成事件_vue提升首屏加载速度

在.js文件中,原来的静态引用方式

import ShowBlogs from '@/components/ShowBlogs'
routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]
复制代码

改为

 routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')
复制代码

以函数的形式动态引入,这样就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会下载路由组件

vue首页加载_vue 页面加载完成事件_vue提升首屏加载速度

首屏需要加载的文件变成了橙色的部分,被小弟们分流出去了300k

如果是在 3中,我们还需要多做一步工作因为 3默认开启(预先加载模块),提前获取用户未来可能会访问的内容在首屏会把这十几个路由文件,都一口气下载了所以我们要关闭这个功能,在vue..js中设置参考官网的做法:

vue首页加载_vue 页面加载完成事件_vue提升首屏加载速度

设置完毕后,首屏就只会加载当前页面路由的组件了

-ui按需加载

vue首页加载_vue 页面加载完成事件_vue提升首屏加载速度

首屏加载的依赖包,其中-ui整整占了568k原本的引进方式引进了整个包:

import ElementUI from 'element-ui'
Vue.use(ElementUI)
复制代码

但实际上我用到的组件只有按钮vue提升首屏加载速度,分页,表格,输入与警告所以我们要按需引用:

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)
Vue.prototype.$alert = MessageBox.alert
复制代码

注意注册方法的区别,并且我们虽然用到了alert,但并不需要引入Alert组件

在.文件中添加(vue-cli 3要先安装babel--):: [["",{"": "-ui","": "theme-chalk"}]]

vue提升首屏加载速度_vue首页加载_vue 页面加载完成事件

-ui小了很多,不过看到那个显眼的table.js后想到,table组件只有后台管理页面用到了,不需要全局注册,所以我们删除main.js中Table和的引用,并在后台组件中局部注册

import { Table, TableColumn } from "element-ui";
components: {
    "el-table": Table,
    "el-table-column": TableColumn },
复制代码

vue提升首屏加载速度_vue 页面加载完成事件_vue首页加载

table就被拆分到了路由文件中组件重复打包

可以看到上图,有两个路由文件都引用了.js造成重复下载我们可以在的文件中,修改的配置

minChunks: 3
复制代码

把3改为2,就会把使用2次及以上的包抽离出来,放进公共依赖文件,不过由于首页也有复用的组件,所以首页也会下载这个公共依赖文件

vue 页面加载完成事件_vue提升首屏加载速度_vue首页加载

首页下载了黄色和灰色部分拆了半天,又回到原点

当然,我们可以继续折腾的配置来解决这个问题但在新版中,被自由度更高,更高级的代替

这也是为什么我要把项目迁移到 3(使用)默认就做了优化,首页只会下载灰色的部分(235K)

gzip

拆完包之后,我们再用gzip做一下压缩安装--

cnmp i compression-webpack-plugin -D
复制代码

在vue..js中引入并修改配置

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /.js$|.html$|.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }
复制代码

vue提升首屏加载速度_vue 页面加载完成事件_vue首页加载

可以看到200k以上的文件被压缩到了100k以内

在服务器我们也要做相应的配置如果发送请求的浏览器支持gzip,就发送给它gzip格式的文件我的服务器是用框架搭建的只要安装一下就能使用

const compression = require('compression')
app.use(compression())
复制代码

注意,后面这一句,要放在所有其他中间件注册之前

*终效果

vue提升首屏加载速度_vue首页加载_vue 页面加载完成事件

首屏加载资源198k,加载时间1s,相比原来速度提升了90%后记:css是否要拆分

3和.x还有一个区别是 3会默认开启一个css分离插件 每一个模块的css文件都会分离出来,整整13个css文件,而我们的首页就请求了4个,花费了不少的资源请求时间我们可以在vue..js中关闭它

    css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: false,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
},
复制代码

vue提升首屏加载速度_vue首页加载_vue 页面加载完成事件

vue首页加载_vue提升首屏加载速度_vue 页面加载完成事件

打包出来的文件中,直接就没有了css文件夹取而代之的是整合起来的一个js文件,负责在一开始就注入所有的样式首屏加载文件数减少,但体积变大,*终测下来速度没有太大差异所以,是否要css拆分就见仁见智,具体项目具体分析吧

总结

性能优化是一个非常令人愉悦的过程,同时也是个深坑vue提升首屏加载速度,有着太多东西,本篇文章开了个头,希望能对大家有所帮助

这是我的个人网站,记录下前端学习的点滴,欢迎大家参观

参考文章

相关推荐
服务项目
微信客服
18762851140
地址:南通市人民东路699号京扬广场D座405
E-mail:18762754067@163.com
Copyright © 2021 南通企邦信息科技有限公司 版权所有 备案号:苏ICP备2020057398号-1 网站地图
高端网站建设 公众号开发 小程序制作 网站seo优化 H5活动营销 互联网产品

18762851140

提交需求