单页应用会随着项目越大，导致首屏加载速度很慢！！！结合目前商城 h5 的首屏加载，以下给出几种优化方案：
- 使用 CDN 资源，减小服务器带宽压力
- 路由懒加载
- 按需加载三方资源，如 vant,建议按需引入 vant 中的组件
- 使用 nginx 开启 gzip 减小网络传输的流量大小
- 首页引入的自定义组件合并成一个分组返回，减少js请求
- app在启动页的时候预先加载首屏
- 利用localstorage缓存首屏数据，每次进入首页优先读取缓存数据，请求首屏接口后返回的数据再更新到缓存里
- 图片使用懒加载展示
- 其他不常用方案（淘宝的cdn的combo技术、br压缩代替gzip压缩）
一、使用 CDN 资源，减小服务器带宽压力
- 在 index.html 中引入 cdn 资源
...
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
<script src="https://cdn-h5.iauto360.cn/h5-mall/js/vue.min.js"></script>
<script src="https://cdn-h5.iauto360.cn/h5-mall/js/vue-router.min.js"></script>
<script src="https://cdn-h5.iauto360.cn/h5-mall/js/vue-lazyload.js"></script>
<script src="https://cdn-h5.iauto360.cn/h5-mall/js/axios.min.js"></script>
</body>
...
- 修改vue.config.js
module.exports = {
...
externals:{
"vue": "Vue",
'vue-router': 'VueRouter',
"vue-lazyload": "VueLazyload",
"axios": "axios",
},
...
}
二、路由懒加载
require.ensure 方式
const workCircle = r => require.ensure([], () => r(require('@/module/work-circle/Index')), 'workCircle')
const workCircleList = r => require.ensure([], () => r(require('@/module/work-circle/pa
import 方式
const workCircle = () => import('@/module/work-circle/Index')
三、按需加载三方资源，如 vant,建议按需引入 vant 中的组件
import {
Dialog
} from 'vant';
Vue.use(Dialog);
四、使用 nginx 开启 gzip 减小网络传输的流量大小
（1）服务端开启gzip压缩
（2）前端生产环境生成gzip，服务器可以直接读取生成的gzip文件，不需要服务器自己再去压缩文件返回给前端
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp(/.(js|css|svg|woff|ttf|json|html)$/),
threshold: 10240,
minRatio: 0.8
}))
五、首页引入的自定义组件合并成一个分组返回，减少js请求
1、 es 提案的 import()
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
2、webpack 提供的 require.ensure()
MBanner: resolve => require.ensure([],()=>resolve((require('../components/m-banner/banner'))), 'component.group1'),
MMenuigroup: resolve => require.ensure([],()=>resolve((require('../components/m_menu_i_group/m_menu_i_group'))), 'component.group1'),
MJoinr: resolve => require.ensure([],()=>resolve((require('../components/m_join_r/m_join_r'))), 'component.group1'),
MUsualr: resolve => require.ensure([],()=>resolve((require('../components/m_usual_r/m_usual_r'))), 'component.g