單頁應用會隨着項目越大，導致首屏加載速度很慢！！！結合目前商城 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