浅谈VUE单页应用首屏加载速度优化方案


Posted in Javascript onAugust 28, 2018

单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案

  • 使用CDN资源,减小服务器带宽压力
  • 路由懒加载
  • 将一些静态js css放到其他地方(如OSS),减小服务器压力
  • 按需加载三方资源,如iview,建议按需引入iview中的组件
  • 使用nginx开启gzip减小网络传输的流量大小
  • webpack开启gzip压缩
  • 若首屏为登录页,可以做成多入口,登录页单独分离为一个入口

使用CDN资源,减小服务器带宽压力

在index.html中引入cdn资源

...
 <body>
  <div id="app">
  </div>
  <!-- built files will be auto injected -->
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
 </body>
 ...

修改 build/webpack.base.conf.js

module.exports = {
 context: path.resolve(__dirname, '../'),
 entry: {
  app: './src/main.js'
 },
 externals:{
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex':'Vuex',
  'vue-resource': 'VueResource'
 },
 ...
}

修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)

路由懒加载

const workCircle = r => require.ensure([], () => r(require('@/module/work-circle/Index')), 'workCircle')
const workCircleList = r => require.ensure([], () => r(require('@/module/work-circle/page/List')), 'workCircleList')

将一些静态js css放到其他地方(如OSS),减小服务器压力

注意这里的js文件,需要将结果抛出,然后在需要用到该js的组件中import引入

按需加载三方资源,如iview,建议按需引入iview中的组件

按需引用请查看iview官方文档iview

使用nginx开启gzip减小网络传输的流量大小

配置nginx,可以参考Nginx开启Gzip压缩大幅提高页面加载速度

webpack开启gzip压缩

这里需要配合Nginx服务器,Nginx开启gzip

config/index.js中

module.exports = {
 build: {
  ...
  // 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: true, // 就是这里开启gzip,vue-cli搭建项目,这里默认为false
  productionGzipExtensions: ['js', 'css'],

  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 }
}

build/webpack.prod.conf.js中

使用vue-cli构建项目时,默认会有这段代码

if (config.build.productionGzip) {
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 webpackConfig.plugins.push(
  new CompressionWebpackPlugin({
   asset: '[path].gz[query]',
   algorithm: 'gzip',
   test: new RegExp(
    '\\.(' +
    config.build.productionGzipExtensions.join('|') +
    ')$'
   ),
   threshold: 10240,
   minRatio: 0.8
  })
 )
}

若首屏为登录页,可以做成多入口,登录页单独分离为一个入口

修改webpack配置

在原先只有一个入口叫app的基础上,再加一个叫login的入口,指向另一个入口js文件;

既然是两个页面,那么原先只有一个的HtmlWebpackPlugin也需要再添加一个,并且filename和template改成登录页的;

HtmlWebpackPlugin默认会把所有资源放进html,为了去掉不需要的资源,需要在HtmlWebpackPlugin选项里分别添加excludeChunks: ['login']和excludeChunks: ['app'];

原先的某些CommonsChunkPlugin会导致报错,删掉只剩下一个manifest的CommonsChunkPlugin就好。

添加登录相关文件

添加之前配好的login入口文件,与app类似,但是去掉登录页不需要的东西,如用不到的组件和样式等;

添加login入口专用的router配置文件,去掉其他路由,只留下登录页一个就好:

浅谈VUE单页应用首屏加载速度优化方案

只留登录路由

添加登录页的html模板,也是去掉登录里用不到的资源。

修改其他细节

登录完不是用vue-router的push方法,而是改成直接修改location.href跳到另一个页面;

去除原来app路由中的login;

登录页中可以使用隐藏的iframe等方式预加载app页面中的数据(猜想)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js创建元素(节点)示例
Jan 02 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
浅谈redux以及react-redux简单实现
Aug 28 #Javascript
Vue封装的可编辑表格插件方法
Aug 28 #Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 #Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 #Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 #Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 #Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 #Javascript
You might like
检查php文件中是否含有bom的函数
2012/05/31 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
分析Python中解析构建数据知识
2018/01/20 Python
python Celery定时任务的示例
2018/03/13 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
《灯光》教学反思
2014/02/08 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python