单页应用会随着项目越大，导致首屏加载速度很慢！！！结合目前商城 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