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为webpack的模块id,不方便读，可以替换成name，
即chunkFilename:utils.assetsPath(js/[name].[hash].js)，这的name为chunk name，值为上面的’chunkname-1’
关于hash
utils.assetsPath(js/[name].[hash].js)中的hash可以有三种值：
1、hash,工程级别的，即每次修改任何一个文件，所有文件名的hash至都将改变。
2、chunkhash根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。
3、contenthash是针对文件内容级别的，只有你自己模块的内容变了，那么hash值才改变
2、关于WebView加载拦截
对于某些公用的第三方库文件，很少去修改，可以将其打包为静态资源直接放在app本地，app访问时，拦截这部分资源直接使用本地资源，以加快第一次加载。
具体实现思路为：
1、使用Dll plugin提前打包第三方资源，并生成新的dll.js和manifest.json文件，其中dll.js为打包后的第三方资源，json为其依赖文件。可参考：https://blog.csdn.net/cjvalue/article/details/100083323
2、在npm run build构建生产版本代码时，加入DllReferencePlugin插件配置，以排除已经在Dll中打包的第三方资源文件，减小生产的vendor-async.js体积
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '..'),
manifest: require('../static/dll/vendor-manifest.json')
}),
* 需要将dll.js引入index.html中，可以直接使用script标签或者通过add-asset-html-webpack-plugin插件引入dll.js文件
3、将dll打包应用到开发环境，可以节省开发中构建项目的时间，webpack-bundle-analyzer可以对当前构建进行分析改进。
3、关于nginx缓存问题
虽然在WebView中使用自带的缓存导致了数据异常问题，但通过nginx只缓存静态资源文件，还是可以的。通过匹配js和css文件设置相关的过期时间，尽量设置一个比较大的时间。
location ~.*\.(js|css)$
{
root /nginx/dist/;
expires 30d; ##不建议直接设置为max，可以设置为一个月或一年
}
这里需要注意的是，需要配合webpack的output的chunkFilename使用，建议使用
chunkFilename: utils.assetsPath(js/[name].[chunkhash].js)
* 在vue项目中，按路由懒加载方式，修改一个xx.vue文件至少会导致app.chunkhash.js、manifest.chunkhash.js和该文件本身生成的xx.chunkhash.js。
app.chunkhash.js由于引用了该vue的xx.chunkhash.js中的chunkhash改变。
mainfest.chunkhash.js改变是由于mainfest.chunkhash.js中包含了该vue的js生成时的chunkhash，引用名称改变，mainfest.chunkhash.js改变
3、其他方面优化
1、预取/预加载模块(prefetch/preload）
即在网络空闲的时间加载用户可能访问的模块的资源文件：
prefetch(预取)：将来某些导航下可能需要的资源
preload(预加载)：当前导航下可能需要资源
可以借助import方法
const LoginModal = import(/* webpackPrefetch: true */ 'LoginModal');
const ChartingLibrary = import(/* webpackPreload: true */ 'ChartingLibrary');
2、iconfont
在H5中可能使用较多的图标，以便让页面看起来更美观，使用SVG或者雪碧图等，需要每次修改相关的文件，而使用iconfont只需要在index.html中修改相关的引用地址名称，也不需要考虑图片缓存问题。
3、直接引用第三发CDN资源
4、代码压缩合并
可以参考webpack插件uglifyjs-webpack-plugin
5、serviceWorker
注册serviceWorker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}
缓存资源
var cacheName = 'v1';
var assetsToCache = [
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(assetsToCache);
}).then(function() {
return self.skipWaiting();
})
);
});
拦截请求，从缓存中获取资源
self.addEventListener('fetch', function(event) {
var requestUrl = new URL(event.request.url);
if (requestUrl.origin === location.origin) {
if (requestUrl.pathname === '/') {
event.respondWith(
caches.open(cacheName).then(function(cache) {
return fetch(event.request).then(function(networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse;
}).catch(function() {
return cache.match(event.request);
});
})
);
}
}
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
缓存控制更新
var OFFLINE_PREFIX = 'offline-';
var CACHE_NAME = 'main_v1.0.0';
self.addEventListener('activate', function(event) {
var mainCache = [CACHE_NAME];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if ( mainCache.indexOf(cacheName) === -1 && cacheName.indexOf(OFFLINE_PREFIX) === -1 ) {
// When it doesn't match any condition, delete it.
console.info('SW: deleting ' + cacheName);
return caches.delete(cacheName);
}
})
);
})
);
return self.clients.claim();
});
* serviceWorker主要处理缓存问题，web Worker主要处理计算问题（详见：https://blog.csdn.net/cjvalue/article/details/97921396）