31.性能优化

首页加载很慢的原因：
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
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>

 

posted @ 2023-07-06 16:13  cjl2019  阅读(21)  评论(0)  编辑  收藏  举报