浅谈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 相关文章推荐
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
canvas绘制环形进度条
Feb 23 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 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使用file_get_content设置头信息的方法
2016/02/14 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
Windows下安装python2.7及科学计算套装
2015/03/05 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Python3 max()函数基础用法
2019/02/19 Python
python三引号输出方法
2019/02/27 Python
如何在pycharm中安装第三方包
2020/10/27 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
文秘专业个人求职信
2013/12/22 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
库房保管员岗位职责
2014/04/07 职场文书
寒假家长评语大全
2014/04/16 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
python用tkinter开发的扫雷游戏
2021/06/01 Python
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers