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

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

  • 使用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配置文件,去掉其他路由,只留下登录页一个就好:

只留登录路由

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

修改其他细节

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

去除原来app路由中的login;

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

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

(0)

相关推荐

  • 详解vue 项目白屏解决方案

    在做的项目是使用 vue-cli 脚手架为基础的,只能使用微信浏览器打开的.在某次更新功能代码后,被反馈在一些手机上会出现白屏.经过一番探索,多管齐下解决了问题 白屏可能的原因: es6 代码没有被编译成 es5 : 文件打包路径错误: 运营商塞入的广告 js 服务器报错,连累项目不能下载资源: 针对 1 和 2 ,分别采取以下做法: 解决位置:config/index.js 文件:把 assetsPublicPath: '/' 改为assetsPublicPath: './' build: {

  • 浅谈vue首屏加载优化

    本文介绍了浅谈vue首屏加载优化,分享给大家,具体如下: 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码. 修改前: import MuseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css' imp

  • 详解一次Vue低版本安卓白屏问题的解决过程

    因为业务需要一定要使用安卓4.4的webview浏览页面,测试的时候发生了白屏问题,很自然想到使用babel转换部分ES6语法. Babel 转换 Promise 和 Symbol ES6语法的配置 # 两项都需要放到生产依赖 npm install babel-polyfill --save npm install es6-promise --save // main.js import 'babel-polyfill'; import Es6Promise from 'es6-promise

  • 解决vue build打包之后首页白屏的问题

    1.问题描述 本地的vue项目在server端浏览没问题,但是执行npm run build 打包之后在本地预览是白屏.有很多js,css无法加载. 2.解决方法 在config文件夹中找到index.js打开把assetsPublicPath: '/'改成下图方框中的样子. 再次执行 npm run build 就可以了. 以上这篇解决vue build打包之后首页白屏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue2.0使用过

  • Vue防止白屏添加首屏动画的实例

    单页应用有个无法避免的问题就是首屏加载慢,虽然可以通过gzip.路由懒加载.CDN.提高服务器带宽等手段,首屏加载速度仍然比传统多页应用慢一些. 为了提高用户体验,首屏添加loading动画很有必要,并且实现特别简单. vue-cli3生成的项目中,打开index.html会发现如下代码 <body> <noscript> <strong>We're sorry but doesn't work properly without JavaScript enabled.

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

    单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方(如OSS),减小服务器压力 按需加载三方资源,如iview,建议按需引入iview中的组件 使用nginx开启gzip减小网络传输的流量大小 webpack开启gzip压缩 若首屏为登录页,可以做成多入口,登录页单独分离为一个入口 使用CDN资源,减小服务器带宽压力 在index.html中引入cdn资源 ... <body> &

  • Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验. 这是优化前的页面加载状态:执行npm run build打包项目,出来的vendeor.js文件,基本都是1M以上的的巨大文件,没有用户能忍受5s以上的loading而不关闭页面的,如图所示: 当项目在挂载到服务器上,平均都是10S以上加载出来,好家伙这加载时间,仿佛过了半个世纪,很烦人,

  • vue项目首屏加载时间优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目 vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx .用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多. 第一步:webpack-bundle-analyzer 分析

  • 详解vue项目首页加载速度优化

    凡是做SPA的项目,特别是移动端的SAP项目,首屏加载速度必定是一个绕不过去的话题.接下来我就我们项目里的一些实践来做一下总结.希望抛砖引玉,如果各位有更好的方案,不吝赐教. 1: 针对第三方js库的优化 我们项目里用到的第三方js库主要有:vue, vue-router, vuex, axio, 我们还用到了qiniu.大家知道这些依赖库的js文件都会被一起打包到vender那个js文件里面,如果这些你的第三方依赖库很多,很大的话,那就会导致vender这个文件很大,那首屏加载的速度肯定会被拖

  • 浅谈Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli工具为例,使用 vue-router搭建SPA应用,UI框架选用 element-ui, ajax方案选用 axios, 并引入vuex,使用 vuex-router-sync将 router 同步到 store ,服务器使用本地Nginx服务. 构建项目 vue-init webpack vue-spa-starter-kit cd vue-spa-starter-kit npm ins

  • 浅谈Vue单页面做SEO的四种方案

    目录 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 优势: 不足:(开发中遇到的坑) 2.Nuxt 静态应用部署 优势: 不足: 3.预渲染prerender-spa-plugin 优势: 不足: 4.Phantomjs 针对爬虫做处理 优势: 不足: 总结 众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法.(本人只用过第一,第三种方案) 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染:Vue官网介绍 ,

  • 浅谈vue单页面中有多个echarts图表时的公用代码写法

    html中: <div class="charts1"/> <div class="charts2"/> <div class="charts3"/> <div class="charts4"/> <div class="charts5"/> <div class="charts6"/> <div class=

  • Vue项目使用CDN优化首屏加载问题

    前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验. 解决方法是,将引用的外部js.css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js.外

  • Vue SPA首屏加载缓慢问题解决方案

    目录 首屏加载 关于计算首屏时间 加载慢的原因 解决方案 静态资源本地缓存 UI框架按需加载 组件重复打包 图片资源的压缩 开启GZip压缩 使用SSR 首屏加载 首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容 首屏加载可以说是用户体验中最重要的环节 关于计算首屏时间 利用performance.timing提供的数据: 通过DOMContentLoad或者pe

随机推荐