浅谈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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
5种 JavaScript 方式实现数组扁平化
Oct 05 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中加session验证)
2012/08/22 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
移动端界面的适配
2017/01/11 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
基于python编写的微博应用
2014/10/17 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
python查看模块安装位置的方法
2018/10/16 Python
Python 多维List创建的问题小结
2019/01/18 Python
Django之form组件自动校验数据实现
2020/01/14 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
SpringBoot快速入门详解
2021/07/21 Java/Android
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫