浅谈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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
python实现下载整个ftp目录的方法
2017/01/17 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
python3实现随机数
2018/06/25 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
Python如何实现动态数组
2019/11/02 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
python suds访问webservice服务实现
2020/06/26 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
公司市场部岗位职责
2013/12/02 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
美德少年主要事迹材料
2015/11/04 职场文书