使用webpack加vue开发单页面程序时,不可避免的会生成大量的css和js文件,常规的优化方案是:
- 拆分第三方库,改为cdn
- vue模块改为懒加载
- 服务器启用gzip减少文件体积
这些操作可以明显提升50%效果,但是在APP中,还是无法达到秒开,所以我们还需要着手对APP进行优化,优化的思路如下:
- 保存第三方js/css到文件夹(Assets目录)
- 预加载本地js/css文件进行缓存
- 当访问h5页面时,拦截js/css文件的访问请求,替换缓存中的本地文件
1.保存第三方js、css文件
首先,将项目中用到的第三方文件保存在Assets目录中
2.预加载本地js/css文件进行缓存
在初始化APP时候,下载h5页面的所有html,然后用正则匹配出所有的本地css和js文件,并且将这些文件存在缓存目录中。
private void cacheWebviewJs() {
HttpClient httpClient = HttpClient.getInstance();
httpClient.getHttpRequestGet("http://www.xxx.com/", new HttpRequestBack() {
@Override
public void back(String s) {
List<String> strs = new ArrayList<String>();
Pattern p = Pattern.compile("href=([css,js][^\\s]*)");
Matcher m = p.matcher(s);
while (m.find()) {
strs.add(m.group(1));
}
for (int i = 0; i < strs.size(); i++) {
String domain = "http://www.xxx.com/";
String path = domain + strs.get(i);
String[] filenameArr = path.split("/");
String filename = filenameArr[filenameArr.length - 1];
String savePath = Environment.getExternalStorageDirectory() + "/xxxapp/data/"; + filename;
File cacheFile = new File(savePath);
if(!cacheFile.exists()){
Log.i("====cacheWebviewJs====", savePath);
SaveDataUtils.writeUrToStrealm(cacheFile,path);
}
}
}
3.拦截js、css请求,并且替换为本地文件
这里进行区分,第三方库的js、css文件,和本地的文件,要分别替换。
这么做目的是防止将来第三方库js文件重名,导致h5无法正确执行。
webView.setWebViewClient(new WebViewClient() {
//只处理21版本以上的安卓程序,以下版本的不是这个方法
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
Uri uri = request.getUrl();
String path = uri.getPath();
if (path.contains(".js") || path.contains(".css")) {
String[] arr = path.split("/")