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