vue网站优化实战之秒开网页

目录
  • 【vue网站优化】网页渲染速度快到极致
    • 在路由配置文件中，采用路由懒加载
    • 关闭webpack的productionSourceMap选项
    • 使用uglifyjs-webpack-plugin来压缩js文件
    • 使用cdn加速用来加载三方插件
    • 服务器端开启gzip压缩
  • 总结

【vue网站优化】网页渲染速度快到极致

在将打包后的dist目录上传到服务器时，往往会出现首次加载页面速度较慢的情况，以下给出几点优化意见

在路由配置文件中，采用路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

vue-router官网介绍

component: () =>
import(/* webpackChunkName: "login" */ '@/views/login/login.vue'),

关闭webpack的productionSourceMap选项

webpack中有一项productionSurceMap设置，productionSourceMap是什么？是打包后是否让每个js文件都生成一个.map文件？true代表生成，false代表不生成。那么.map文件作用是什么？因为打包后代码都是经过压缩加密的，如果出现报错情况，输出错误信息，不会知道是哪里代码有问题，.map就行没有加密一样，能准确输出哪一行出错了。但是在生产环境中，我们是不需要输出错误信息的，在webpack.config.js中找到productionSourceMap选项，并关闭它

source-map官网描述

productionSourceMap: false,

使用uglifyjs-webpack-plugin来压缩js文件

官网叙述很直白，就是直接压缩，在此不做过多叙述

插件描述

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

new UglifyJsPlugin({
    uglifyOptions: {
	    compress: {
	          warnings: false,
	    }
    },
    sourceMap: config.build.productionSourceMap,
    parallel: true
}),

使用cdn加速用来加载三方插件

点击跳转之前的文章查看，此处不做过多赘述

服务器端开启gzip压缩

前端采用compression-webpack-plugin插件将代码压缩为gzip结尾的文件，后端通过nginx开启gzip压缩，完成完整压缩流程
插件描述

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
    })
)

前端

nginx

gzip_static: on

注：在github pages上可直接上传gzip文件，github默认开启gzip选项，由于webpack配置可能不同，所以仅提供解决思路，不建议直接copy，如果对此配置感兴趣,可前往 github查看具体配置

总结

到此这篇关于vue网站优化实战之秒开网页的文章就介绍到这了,更多相关vue秒开网页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于Vue实现电商SKU组合算法问题

    前段时间,公司要做"添加商品"业务模块,这也算是电商业务里面的一个难点了. 令我印象最深的不是什么"组合商品"."关联商品"."关联单品",而是商品SKU的组合问题. 这个问题特别有意思,当时虽然大体上组合成功,总是有些小bug解决不了,然后手上又有别的任务就没仔细研究它. 后来过了一个月,空闲下来专门研究了下,终于把问题解决,有必要记录下这次体验. 先看下在业务中的效果(tips: 如看不清可放大浏览器) 这个相对来说比较麻

  • Vue电商网站首页内容吸顶功能实现过程

    目录 交互要求 实现思路 核心代码 交互要求 滚动距离大于等于78个px的时候,组件会在顶部固定定位 滚动距离小于78个px的时候,组件消失隐藏 实现思路 准备一个吸顶组件,准备一个类名,控制显示隐藏 监听页面滚动,判断滚动距离,距离大于78px添加类名 核心代码 (1)新建吸顶导航组件src/Layout/components/app-header-sticky.vue <script lang="ts" setup name="AppHeaderSticky&quo

  • 基于vue3.0.1beta搭建仿京东的电商H5项目

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! GitHub地址请访问:https://github.com/GitHubGanKai/vue3-jd-h5 项目介绍 vue-jd-h5是一个电商H5页面前端项目,基于Vue 3.0.0-beta.1 + Vant 实现,主要包括首页.分类页面.我的页面.购物车等. 本地线下代码vue2.6在分支demo中,使用mockjs

  • Vue实现商品飞入购物车效果(电商项目)

    各位掘友,好久不见,最近利用工作之余开源了Vue电商项目,高仿某知名O2O买菜平台,整个项目做下来收获还是蛮多的,可以扫描下方二维码体验,本篇是项目的核心知识拆解篇,主要是拆解增加商品飞入购物车的实现过程. 点我体验 项目开源地址 感谢点星+收藏 首先我先简单的介绍下本项目所用到的技术栈: 整个项目采用 vue-cli3 脚手架搭建, Vue全家桶(vue.vuex.vue-router) . Vant UI框架 以及很多著名好用的第三方库如: axios . fastclick . bette

  • 基于vue2.x的电商图片放大镜插件的使用

    基于vue2.x的电商图片放大镜插件的使用

    最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue-piczoom picture magnifier component for Vue.js 2.x 基于vue2.x的电商图片放大镜插件 GIF 动画截图 Build Setup 使用步骤 # 安装 install npm install vue-piczoom --save 使用 use --

  • Vue 电商后台管理项目阶段性总结(推荐)

    一.阶段总结 该项目偏向前端更多一点,后端 API 服务是已经搭建好了的,我们只需要用既可以,(但是作为一个 全栈开发人员,它的数据库的表设计,Restful API 的设计是我们要着重学习的!!!) 这个vue 项目是从 2020 4月开始,一直开发直至 5月23日 部署上线,也算是我的第二个 vue 的实战项目(其实是熟悉 elementUI 的使用),在开发过程中使用 Vue cil4 脚手架进行开发,使用码云作为 Git 管理仓库, 目前已经基本开发完毕,在服务器上也能够正常运行 (ng

  • Vue项目优化的一些实战策略

    Vue项目优化的一些实战策略

    Vue项目完成后就要从开发环境转成生产环境 一些第三方的包体积过大,导致生成js文件过于庞大,这是时候可以生成打包报告来查看项目中的问题 1.生成报告有两种方式,一种使用npm run build --report 2.另一种使用vue脚手架的ui可视化面板,在项目中输入vue ui 3.点击生产环境下的运行按钮,可以看到打包出来的js文件一共有2M之多,js/chunk-vendors.js就是一些项目依赖文件, 再右侧可以看到element-ui 和echarts 以及富文本编辑器,树状表格

  • Vue.js项目实战之多语种网站的功能实现（租车）

    首先来看一下网站效果,想写这个项目的读者可以自行下载哦,地址:https://github.com/Stray-Kite/Car: 在这个项目中,我们主要是为了学习语种切换,也就是右上角的 中文/English 功能的实现. 首先看一下模拟的后台数据src/config/modules/lang.js 文件中: 关键代码: export default { name: 'Homepage', components: { ScrollNumber }, data () { return { lan

  • 网页的HTML静态化_网站优化之谈

    主要原因是:对于各种语言(ASP,PHP,JSP,CGI,.NET)动态页面经常采用多个页面来组成一个主页面,拿网站的首页来说:通常是把LOGO等头部分定义为一个页面,尾部版权部分也定义一个页面,主要是为了其他页面也可以方便的调用.所以网站的首页部分只用了一段代码调用了文件,也就少了很多搜索引擎要抓的关键字. 由于大量动态网页的存在,使得有些全动态网页的网站失去很多被用户发现的机会.为了网络营销的需要,如果网站无法全部用静态网页实现,应采用静动结合的基本方式,即能用静态网页解决的决不用动态网页,

  • 什么是真正的网站优化（网站优化的真正含义）？

    根据新竞争力网络营销管理顾问的研究,网站优化就是通过对网站功能.网站结构.网页布局.网站内容等要素的合理设计,使得网站内容和功能表现形式达到对用户友好并易于宣传推广的最佳效果,充分发挥网站的网络营销价值.  网站优化设计的含义具体表现在三个方面:对用户优化.对网络环境(搜索引擎等)优化,以及对网站运营维护的优化. (1)对用户优化: 经过网站的优化设计,用户可以方便地浏览网站的信息.使用网站的服务.具体表现是:以用户需求为导向,网站导航方便,网页下载速度尽可能快,网页布局合理并且适合

  • 达到良好的网站优化效果需要注意的十点小结

    要达到良好的网站优化效果,除了要保证足够的高质量原创内容及广泛建立连接提高Link Popularity外,对网页进行充分的优化更是必需的,很多时候,其重要性远远超出其他.以下部分按其对优化效果影响度自大至小排列. Title 标签 网站优化在HTML语句中包含在 之间的内容,用来概括页面的基本内容.在用户浏览网页时Title显示在浏览器窗口的上方,而在SERP页面中,Title更是决定用户是否点击该页面的主要因素. 内容中的关键词 网站优化网页文本中包含的用户搜索时输入的关键词,这方面的优化包

  • vue项目优化之通过keep-alive数据缓存的方法

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓

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

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

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

  • vue递归组件实战之简单树形控件实例代码

    1.递归组件-简单树形控件预览及问题 在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2.树形控件基本结构及样式 <template> <ul class="vue-tree"> <li class="tree-item"> <div class="tree-content"><!--节点内容--> <div class="expand-

  • Vue render函数实战之实现tabs选项卡组件

    Vue render函数实战之实现tabs选项卡组件

    用过Element ui库的童鞋肯定知道<el-tabs>组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用<el-tabs>组件的时候有没有想过它是如何实现的?我咋刚开始使用<el-tabs>组件的时候就有去想过,也想去实现一个超级简单的tabs选项卡组件,无奈当时功力不够,未能实现.最近的一个简单项目中正好要用到选项卡组件,由于项目简单也就没有使用任何第三方库,于是就自己动手写了个选项卡组件. 1.实现tabs选项卡组件的思考 <el-tabs

  • python动态网站爬虫实战(requests+xpath+demjson+redis)

    python动态网站爬虫实战(requests+xpath+demjson+redis)

    目录 前言 一.主要思路 1.观察网站 2.编写爬虫代码 二.爬虫实战 1.登陆获取cookie 三.总结 前言 之前简单学习过python爬虫基础知识,并且用过scrapy框架爬取数据,都是直接能用xpath定位到目标区域然后爬取.可这次碰到的需求是爬取一个用asp.net编写的教育网站并且将教学ppt一次性爬取下来,由于该网站部分内容渲染采用了js,所以比较难用xpath直接定位,同时发起下载ppt的请求比较难找. 经过琢磨和尝试后爬取成功,记录整个爬取思路供自己和大家学习.文章比较详细,对

随机推荐