VUE单页应用首屏加载优化技巧

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

原文地址：https://www.cnblogs.com/ivan5277/p/12981018.html