浅谈vue加载优化策略

vue.js是一个比较流行的前端框架，与react.js、angular.js相比来说，vue.js入手曲线更加流畅，不管掌握多少都可以快速上手。但是单页面应用也都有其弊病，有时候首屏加载慢的让人捏舌。今天我们以vue cli3.x来说一说如何行之有效的缓解此问题！

方法一 路由懒加载

首屏加载慢的原因无非就是单页面应用需要加载完整个路由表上的页面，而路由懒加载就是来解决这个问题的。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。下面这个就是vue路由懒加载的一个具体例子。方法很简单，如果您不想深入了解，只需按照这个格式引入路由就可以了。如果您对路由懒加载感兴趣，请移步vue-router路由懒加载

方法二 组件按需加载

为什么要按需加载组件呢？原因也很简单，一些组件库包含丰富的组件，如果我们直接将其引入，不免会引入一些我们压根用不到的组件。这样打包起来体积会比较大，同样显得我们很不专业。因此按需引入就显得很必要了。我们现在就拿iview组件库为例，了解一下按需引入的流程。

1.首先引入按需加载工具 babel-plugin-import

babel-plugin-import是babel它会在编译过程中将 import 的写法自动转换为按需引入的方式。

npm install babel-plugin-import --save-dev

2.在项目根目录创建.babelrc文件并配置按需加载内容

{
 "plugins": [["import", {
  "libraryName": "iview",
  "libraryDirectory": "src/components"
 }]]
}

3.在main.js配置项目需要加载的组件

下面是iview的一个例子

这里需要注意全局注册的组件需要挂在到vue原型上，例如我们需要使用Notice组件，那我就需要

Vue.prototype.$Notice = Notice;

这样我们就可以正常的使用iview的组件了。

方法三 使用CDN加速策略

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，那么vendor.js文件体积将会相当的大，影响首开的体验。解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。外部的库文件，就可以使用CDN资源。vue cli3.x在配置cdn是和vue cli2.x有一些区别，vue cli在升级后，代码结构变化比较大，配置文件集成到了vue.config.js文件中。下面以amap、axios和qs为例讲述如何使用cdn加载资源。

1.在index.html中引入相关cdn资源

2.配置externals

vue cli3.x 配置webpack是在vue.config.js的configureWebpack中

配置完之后，我们就可以正常使用全局的Amap、axios和Qs了

方法四 使用compression-webpack-plugin将文件打包成gzip格式

compression-webpack-plugin这个依赖在npm run build是会生成.gz文件。之后项目访问的文件就是这个.gz文件，正常的项目打包体积会减少一半还要多，是不是很吊

下面我们来进一步讲述这个这个依赖的使用流程。

1.npm 引入

npm install compression-webpack-plugin --save-dev

2.vue cli3.x在 vue.config.js配置webpack

3.nginx开启gzip模式

在上一步前端就已经配置好了，之后就是nginx配合开启gzip模式，这个比较简单，只要你对nginx有一点了解，我们在nginx.conf中的http中配置一些代码

4.验证是否配置成功

这步就很简单了只需要查看chunk类文件的Response Headers的Content-Encoding是否是gzip即可

以上就是解决vue首屏加载慢的一些方法，希望文章能帮助大家解决问题谢谢。也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

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

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

    浅谈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项目首页加载速度优化

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

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

  • vue-cli 首屏加载优化问题

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js   类似下面的路由代码 router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Personal from '@/components/page/Personal' import Message from '@/components/personnal/

  • vue-cli项目优化方法- 缩短首屏加载时间

    最近实习的项目需求上要求不多,就学了下项目优化,主要是首屏加载太慢. 大文件定位 我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件. 安装 npm install --save-dev webpack-bundle-analyzer 在webpack中设置如下,然后npm run dev 的时候默认会在8888端口显示. const BundleAnalyzerPlugin = require('webpac

  • 浅谈vue项目优化之页面的按需加载(vue+webpack)

    浅谈vue项目优化之页面的按需加载(vue+webpack)

    通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来.结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载. 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这

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

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

  • 浅谈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加载优化策略

    vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌.今天我们以vue cli3.x来说一说如何行之有效的缓解此问题! 方法一 路由懒加载 首屏加载慢的原因无非就是单页面应用需要加载完整个路由表上的页面,而路由懒加载就是来解决这个问题的.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.下面这个

  • 浅谈vue项目打包优化策略

    使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载 这是首先可以优化的点.如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件. 示例如下: 1.1 element-ui 首先,安装 babel-plugin-component: npm install babe

  • 浅谈Volley加载不出图片的问题

    问题分析:加载后台图片的时候,发现加载不出来,后来发现图片的url格式是: http://192.168.1.71/\carhome\shop\778c2bc3ec0a49e1969b24b3a8e62f31\detail\DSC04209.JPG 因为Volley请求,不识别url中有"\" 所以需要把"|"替换成"/" 以下是工具类 public class StringUtil { public static String formatUr

  • 浅谈Tensorflow加载Vgg预训练模型的几个注意事项

    写这个博客的关键Bug: Value passed to parameter 'input' has DataType uint8 not in list of allowed values: float16, bfloat16, float32, float64.本博客将围绕 加载图片 和 保存图片到本地 来详细解释和解决上述的Bug及其引出来的一系列Bug. 加载图片 首先,造成上述Bug的代码如下所示 image_path = "data/test.jpg" # 本地的测试图片

  • 浅谈webpack 构建性能优化策略小结

    背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了grunt和gulp成为大多数前端工程实践中的首选,React,Vue,Angular等诸多知名项目也都相继选用其作为官方构建工具,极受业内追捧.但是,随者工程开发的复杂程度和代码规模不断地增加,webpack暴露出来的各种性能问题也愈发明显,极大的影响着开发过程中的体验. 问题归纳 历经了多个web项目

  • 浅谈BeanPostProcessor加载次序及其对Bean造成的影响分析

    前言 BeanPostProcessor是一个工厂钩子,允许Spring框架在新创建Bean实例时对其进行定制化修改.例如:通过检查其标注的接口或者使用代理对其进行包裹.应用上下文会从Bean定义中自动检测出BeanPostProcessor并将它们应用到随后创建的任何Bean上. 普通Bean对象的工厂允许在程序中注册post-processors,应用到随后在本工厂中创建的所有Bean上.典型的场景如:post-processors使用postProcessBeforeInitializat

  • 浅谈Vue 初始化性能优化

    前言 一般来说,你不需要太关心vue的运行时性能,它在运行时非常快,但付出的代价是初始化时相对较慢.在最近开发的一个Hybrid APP里,Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms,这让我开始重视vue的初始化性能,并最终优化到200 ~ 300ms,这篇文章分享我的优化思路. 性能瓶颈在哪里? 先看一下常见的vue写法:在html里放一个app组件,app组件里又引用了其他的子组件,形成一棵以app为根节点的组件树. <body> <

  • 浅谈vue-cli加载不到dev-server.js的解决办法

    在使用vue开发过程中,难免需要去本地数据地址进行请求,而原版配置在dev-server.js中,新版vue-webpack-template已经删除dev-server.js,改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可. #webpack.dev.conf.js //首先 // nodejs开发框架express,用来简化操作 const express = require('express') // 创建node.js

  • Vue首页界面加载优化实现方法详解

    Vue首页界面加载优化实现方法详解

    目录 1.路由懒加载 2.js 资源异步加载 3.图片懒加载 4.组件分包懒加载-在视口才加载 1.路由懒加载 问题: 项目在打包时会将首页与其他页面的资源打包到同一个资源文件,造成首页加载的资源文件过大. 解决方法: 路由懒加载:打包时会将每个路由页面拆分成单独的 js 资源,同时跳转到对应页面才会加载对应路由的 js 资源. { path: "/about", name: "about", component: () => import(/* webpac

随机推荐