h5混合开发加载优化问题

1、问题描述

在项目中，存在微信公众号（即：H5页面）以及安卓和iOS等两款app，在app中调用了H5页面部分业务代码和相关设备的详情页面，但在app中设置WebView缓存的时候，发现切换页面的时候数据没有及时更新，导致app放弃了webview缓存，其结果就是每次从app进入H5都会加载H5相关资源，导致加载缓慢。

WebView的四种缓存机制：

// LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据

// LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.

// LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。

// LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

2、优化方向

1、H5页面按需加载

首先当WebView加载H5页面时，尽可能只加载其所需页面资源，配合webpack配置和vue-router，可以较为方便的实现。

vue-router提供的路由懒加载主要依赖与webpack的代码分割和vue的异步组件，webpack提供了两种方式分离方式：1、es6提供的import()即vue-router推荐的方法，2、是webpack特定的require.ensure。

具体使用如下：

const chunkname1 = r => require.ensure([], () => r(require('@/components/chunkname1.vue')), 'chunkname-1')

其中chunkname-1为传入的chunkName，若想真正将每个chunk独立出来，还需要给每个chunk名不同的名称，若chunkName相同会导致，相同名称的chunk打到同一个js中。

命名在webpack配置的output中设置，即输出，新增一项：chunkFilename: utils.assetsPath(js/[id].[hash].js)

关于id

其中id为web