您现在的位置是：主页 > news > 微信网站模版下载/优秀企业网站欣赏
微信网站模版下载/优秀企业网站欣赏
admin2025/5/6 7:46:06【news】
简介微信网站模版下载,优秀企业网站欣赏,怎么向搜索引擎提交网站,上海滕州建设集团网站一、原因： 单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js 和vendor.js)，所以当网速差的时候会产生一定程度的白屏 二、解决办法： 1、路由懒加载，组件懒加载 1.路由懒加载 // 1、Vue异步组…
一、原因：
单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js 和vendor.js)，所以当网速差的时候会产生一定程度的白屏
二、解决办法：
1、路由懒加载，组件懒加载
1.路由懒加载
// 1、Vue异步组件技术：
{path: '/home',name: 'Home',component: resolve => require(['../views/home.vue'], resolve)
}// 2、es6提案的import()
{path: '/',name: 'home',component: () => import('../views/home.vue')
}// 3、webpack提供的require.ensure()
{path: '/home',name: 'Home',component: r => require.ensure([],() => r(require('../views/home.vue')), 'home')
}
2.组件懒加载
components:{"dailyModal":()=>import("./dailyModal.vue")
},
components:{"dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},
2、CDN 资源优化
CDN 的全称是 Content Delivery Network，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。
随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。此时我们可以使用 CDN 的方法，优化网络加载速度。
1、将 vue、vue-router、vuex、axios 这些 vue 全家桶的资源，全部改为通过 CDN 链接获取，在 index.html 里插入相应链接。
<body><div id="app"></div><script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script><script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script><script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script><script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
</body>
2、在 vue.config.js 配置 externals 属性
const timestamp = new Date().getTime()
module.exports = {configureWebpack: {externals: {'vue': 'Vue','vuex': 'Vuex','vue-router': 'VueRouter','axios':'axios'}}
}
3、卸载相关依赖的 npm 包
npm uninstall vue vue-router vuex axios
3、gZip 加速优化
所有现代浏览器都支持 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。
gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好。
compression-webpack-plugin可能存在兼容性问题，下载时固定版本
npm i compression-webpack-plugin@5.0.2 -S
const CompressionPlugin = require('compression-webpack-plugin')
chainWebpack(config) {config.when(process.env.NODE_ENV !== "development", config => {config.plugin('compressionPlugin').use(new CompressionPlugin({test: /\.(js|css|html)$/,// 匹配文件名threshold: 10240,deleteOriginalAssets: false //是否删除原文件}));});
},
压缩完还需要nginx配置一下
server { #在这个server中加入下面这些代码gzip on;gzip_min_length 1k;gzip_comp_level 9;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;gzip_vary on;gzip_disable "MSIE [1-6]\.";
}
最新发现启动gzip压缩后的包跟之前的有差异， js方面没啥问题，但是css方面会出现问题，例如opacity不能写百分比格式，百分比格式会默认转为0.1，要写成0-1之间的小数点格式
4、vue.config.js中关闭productionSourceMap
productionSourceMap是用来报错时定位到代码位置。
如果不想让别人看到源码可以设置为false，并且可以减少打包后包的体积，加密源码。
productionSourceMap: false,
5、SSR，服务端渲染，在服务端事先拼装好首页所需的 html
6、首页加 loading或 骨架屏（优化体验）
随着 SPA 在前端界的逐渐流行，单页面应用不可避免地给首页加载带来压力，此时良好的首页用户体验至关重要。很多 APP 采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。
所谓的骨架屏，就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。在这个过程中用户会感知到内容正在逐渐加载并即将呈现，降低了“白屏”的不良体验。
https://segmentfault.com/a/1190000020124630?utm_source=tag-newest
