首页 > 其他分享 >31.性能优化

31.性能优化

时间:2023-07-06 16:22:19浏览次数:74  
标签:index vue 31 js gzip import 优化 性能 加载

首页加载很慢的原因: 1. 由于vendor.js和app.css较大,VUE等主流的单页面框架都是js渲染html body的,所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。 2. 单页面首次会把所有界面和接口都加载出来,会有多次的请求和响应,数据不能马上加载,二者相加所以会有长时间的白屏。     优化方案如下: 1. vue-router 路由懒加载 懒加载即组件的延迟加载,通常vue的页面在运行后进入都会有一个默认的页面,而其他页面只有在点击后才需要加载出来。使用懒加载可以将页面中的资源划分为多份,从而减少第一次加载的时候耗时。

const routes = [
  {
    path: "/",
    redirect: "/home"
  },
  {
    path: "/home",
    component: () => import('@/components/Home.vue'), //路由懒加载
    name: "Home"
  }
];
  2. 使用CDN加载第三方库 在打包后发现vendor.js 文件占用内存特别大,这里面主要是使用的一些第三方库,例如 vuex,vue-router,axios,elementUI 等文件。 通过在index.html 中直接引入第三方资源来缓解我们服务器的压力,其原理是将我们的压力分给了其他服务器站点。 推荐外部的库文件使用CDN资源如下: bootstrap CDN:https://www.bootcdn.cn Staticfile CDN:https://www.staticfile.org jsDelivr CDN:https://www.jsdelivr.com 75 CDN:https://cdn.baomitu.com UNPKG:https://unpkg.com cdnjs:https://cdnjs.com
//第一步:在index.html中,添加CDN资源。也可将资源下载到本地,引入本地中的资源。
//注意:版本号要与package-lock.json里面的版本号一致。
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  //link放在head
  <link rel='icon' type='image/x-icon' href='./static/favicon.ico'>
  <link href="https://cdn.staticfile.org/element-ui/2.4.3/theme-chalk/index.css" rel="stylesheet">
  <title>web</title>
</head>
<body>
  <div id="app"></div>
  //script放在body末尾
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/element-ui/2.15.12/index.js"></script>
  <script src="https://cdn.staticfile.org/axios/1.4.0/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.6.5/vue-router.min.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script> -->
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vuex/4.1.0/vuex.cjs.js"></script> -->
</body>

//第二步:在 bulid/webpack.base.conf.js 文件中,增加 externals,将引用的外部模块导入。
//注意:属性名是require的名字(package-lock.json里面的属性名),属性值是第三方库暴露出来的方法名。
module.exports = {
  externals: {
    vue: "Vue",
    "element-ui": "ELEMENT",
    axios: "axios",
    "vue-router": "VueRouter",
    // echarts: "echarts",
    // vuex: "Vuex",
    moment: "moment", 
    md5: "md5",
    "mint-ui": "MINT", 
  }
}

//第三步:在main.js中移除import的引入,改为改为require方式引入。src–>router–>index.js中改为const Router = require('vue-router')
//==================================== main.js ====================================
// import Vue from "vue";
// import ElementUI from "element-ui";
// Vue.use(ElementUI);
// import axios from "axios";
// Vue.prototype.$axios = axios;
// import * as echarts from "echarts";
// Vue.prototype.$echarts = echarts;
const Vue = require("vue");
const ElementUI = require("element-ui");
import router from "./router";
import "element-ui/lib/theme-chalk/index.css";
const axios = require("axios");
const echarts = require("echarts");
//==================================== src–>router–>index.js ====================================
//import Router from 'vue-router'
//Vue.use(Router)
const Router = require('vue-router')
问题:使用elementUI 图标字体无法正常显示,element-icons.woff element-icons.ttf 这两个字体图标库文件找不到。 解决方法:在index.css同级创建fonts文件,把element-icons.woff和element-icons.ttf两个文件放里面。或者在main.js中保留import "element-ui/lib/theme-chalk/index.css";   3. 防止编译文件中出现map文件 在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件。   4. 去掉代码中的console.log 需要去掉代码中的console.log ,防止打开f12 的时候输出日志。 在webpack.prod.conf.js 文件中设置:
new UglifyJsPlugin({
    uglifyOptions: {
        compress: {
            warnings: false,
            drop_debugger: true,
            drop_console: true
        }
    },
    sourceMap: config.build.productionSourceMap,
    parallel: true
})

 

5. 使用gzip压缩

//第一步:修改config/index.js 文件下 productionGzip:true;

//第二步:在 webback.prod.config.js 中添加如下代码:
webpackConfig.plugins.push(
  new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',      
      test: new RegExp('\.(' + config.build.productionGzipExtensions.join('|') +')$'),
      threshold: 10240,
      // deleteOriginalAssets:true, //删除源文件
      minRatio: 0.8
  })
)

//第三步:在Nginx 下开启gzip,添加如下配置:
http:{ 
    gzip  on; #开启gzip
    gzip_vary on;
    gzip_min_length 1k; #不压缩临界值,大于1k的才压缩,一般不用改
    gzip_buffers 4 16k;
    gzip_comp_level 6; #压缩级别,数字越大压缩的越好
    gzip_types  text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-icon; #压缩文件类型,缺啥补啥
}

 

6. 所有的优化都做完之后,网慢的时候还是会有白屏,可以加骨架屏或者loading。 在index.html中添加如下代码,这样就可以有效解决白屏问题。
<body>
    <div id="app">
       // 我们只需要再这里添加loading图或者骨架屏,有人会说怎么控制它的显示隐藏啊。不用担心,再项目初始化完成后会自动替换为你的页面。
       <div class="self-loading">
          页面正快马加鞭赶来,请耐心等待
      </div>
    </div>
</body>

 

标签:index,vue,31,js,gzip,import,优化,性能,加载
From: https://www.cnblogs.com/chenJieLing/p/17532504.html

相关文章

  • java中http请求-okhttp使用连接池优化
    愿历尽千帆,归来仍是少年原因:避免频繁频繁的开关连接。1.Maven添加依赖<dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>3.10.0</version></dependency>2.OkHttpConfiguration配置类......
  • 根据服务标签id优化表A与表B的数据匹配方法
    You两个表都有一个字段,ServiceTagIDsstringjson:"service_tag_ids"//服务标签id,用英文逗号隔开,怎么根据这些服务标签id从表A的记录找出表B的记录Genie要根据表A的记录中的服务标签id,找出表B的记录,你可以使用数据库查询语句来实现。假设表A的名称为table_a,字段名......
  • 2023-07-06 《数值优化方法》-庞丽萍,肖现涛-无约束最优化(一).md
    2023-07-06《数值优化方法》-庞丽萍,肖现涛-无约束最优化(一)数值优化方法Matlab优化概述形如的问题称为无约束最优化问题,注意到上述问题是定义在上且为实值函数。对于上述优化问题首先需要明确的是最优解的概念。定义1.1若对任意,不等式成立,则称是优化问题的全局极小解(或全......
  • 使用部分写时复制提升Lakehouse的 ACID Upserts性能
    使用部分写时复制提升Lakehouse的ACIDUpserts性能译自:FastCopy-On-WritewithinApacheParquetforDataLakehouseACIDUpserts传统的写时复制会直接读取并处理(解压解码等)整个文件,然后更新相关数据页并保存为新的文件,但大部分场景下,upsert并不会更新所有数据页,这就导致......
  • DP 优化
    1.单调队列优化DP1.1简介当一个选手比你小还比你强,你就打不过他了。这是对单调队列简单形象的概括。单调队列在转移的过程中不断排除不可能成为决策点的元素,使每次转移寻找决策点的时间复杂度降为\(O(1)\)。一般地,可被单调队列优化的转移式可被写为如下形式:\[F_i=\max_{l_......
  • memreduct内存优化工具
    适用平台:windows下载地址运行截图托盘菜单支持多种功能......
  • 优化代码,满足条件时,立即跳出循环
    在做数组作业的过程中,遇到了一个问题,题目是定义一个数组其中包含多个数字。用自己的方式最终实现,奇数放在数组的左边,偶数放在数组的右边。(可以创建其他数组,不必须在原数组中改变)。如果创建其他数组的话,解题的方法当然就很简单了,创建一个新数组,奇数从前往后插入,偶数从后往前插入,核......
  • m基于GA遗传优化算法的二维室内红外传感器部署策略matlab仿真
    1.算法仿真效果matlab2022a仿真结果如下:   2.算法涉及理论知识概要       遗传算法的原理        遗传算法GA把问题的解表示成“染色体”,在算法中也即是以二进制编码的串。并且,在执行遗传算法之前,给出一群“染色体”,也即是假设解。然后,把这些假设解置......
  • 性能优化利器 std::move/forward 实现原理
    utility包含了STL经常使用的几个模板函数的定义:std::move()用于得到一个右值引用;std::swap()使用移动语义,交换两个对象;std::forward()支持完美转发。本文分析了上述三个模板函数的实现原理。本文内容:1、std::move2、std::swap3、std::forward 1、std::move......
  • 浅谈斜率优化
    如果一个DP的转移方程可以写成\(f_i=\underset{j<i}{\min\!/\!\max}\>\{f_j+a_i\timesb_j+c_i+d_j\}+C\)的形式,那么可以运用斜率优化。不妨设转移是\(\min\),设\(g_{i,j}=f_j+a_i\timesb_j+c_i+d_j\),即\(f_i=\min\limits_{j<i}g_{i,j}\),式子可以化为\(f_j+d_j=-a_i\time......