您现在的位置是：首页>文档内容页

文档详情

前端静态文件缓存优化采坑记录

前端开发前端框架 html

doramart 2017-10-19 18:03:53 NodeJs238219

前端静态文件缓存，大家已经耳熟能详，近期对项目进行优化又去详细看了下相关资料，在此整理。

1、PWA，目前比较火的 PWA 方案 :Progressive Web Apps 是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。

关于什么是service work 和关于它的生命周期，注册卸载以及跟服务端客户端交互的相关内容在此就不详细介绍了。这里主要介绍如何给web app 加上 service worker 支持，网上资料已经比较多了，我尝试的是使用webpack 的一个插件 offline-plugin(https://github.com/NekR/offline-plugin) 使用比较方便，api比较齐全，可以自动生成manifest文件。在webpack端配置：

new OfflinePlugin({
      safeToUseOptionalCaches: true,

      caches: {
        main: [
          'main.js',
          'main.css',
          'index.html'
        ],
        additional: [
          '*.woff',
          '*.woff2'
        ],
        optional: [
          ':rest:'
        ]
      },

      ServiceWorker: {
        events: true
      },
      AppCache: {
        events: true
      }
    })

在入口js中添加

require('offline-plugin/runtime').install();

ES6/Babel/TypeScript

import * as OfflinePluginRuntime from 'offline-plugin/runtime';
OfflinePluginRuntime.install();

之后用webpack 构建就可以了。

从 network 中可以看到，再次请求的静态资源请求的是service worker:

service worker1.jpg

值得注意的是，感觉service worker 并不太适合多页面应用，何为多页面，即请求先走的服务端，通过服务端直接渲染的页面，service worker 效果不明显，它比较适合单页面应用，比如vuejs 或者 react 类 spa类型的应用，另外，service worker 虽然被google和前端爱好者所推崇，然而，兼容性还不是那么理想，ios 目前是不支持的。

service worker2.png

2、尝试用独立的manifest 。虽然官方目前不是很推荐用manifest，而且也停止了manifest的更新，但是目前绝大多数的现代浏览器都是支持的，也是比较成熟的缓存方案，在w3上面对它的优点做了简单介绍：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

于是开始尝试，manifest的webpack插件也比较多，试用了几个，感觉都很不爽，不能满足业务需求，比如我想：

1、开发环境，uat环境，生产环境 manifest 各不相同，特别是生产是cdn

2、我还需要额外添加一些其他静态资源

没有合适的就自己写一个(MakeManifest.js)：

/**
 * manifest生成
 * 根据环境变量生成manifest文件做静态文件预缓存
 *
 * 参数: options = {
 *  path: './build/assets/manifest.appcache' //生成静态资源缓存文件
 * }
 *
 * @param options
 * @constructor
 */
var fs = require('fs'),NODE_ENV = process.env.NODE_ENV;
var pkg = require('../package.json');
function MakeManifest(output, options) {
    this.output = output
    this.options = options
}

function getExtraSource() {
    var sourceArr = [];
    sourceArr.push('https://m.163.com/static/common/js/NativeAPI.js');
    sourceArr.push('https://m.163.com/omm/mobile/sdk/product/1.0.0/js/product.js');
    sourceArr.push('https://m.163.com/omm/mobile/sdk/product/1.0.0/css/style.css');
    // a/b Test资源文件
    sourceArr.push('https://sdk.appadhoc.com/ab.plus.js');
    return sourceArr;
}
function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
        + " " + date.getHours() + seperator2 + date.getMinutes()
        + seperator2 + date.getSeconds();
    return currentdate;
}    

MakeManifest.prototype.apply = function (compiler) {
    var baseOutPath = this.output;
    var outPutManiFile = this.output + '/manifest.appcache'
    var outPutManiHtmlFile = this.output + '/manifest.html'
    var options = this.options

    compiler.plugin('emit', function (compilation, done) {
        var results = compilation.getStats().toJson(options), cateFile = [];

        for (var i = 0; i < results.chunks.length; i++) {
            var chunk = results.chunks[i];
            chunk.files.forEach(function (item) {
                if (!/\.map$/.test(item)) {
                    var firstPath = NODE_ENV == 'production' ? 'https://cdn.m.163.com/oas/static/assets/' : '/oas/static/assets/';
                    cateFile.push(firstPath + item);
                }
            }, this);
        }
        var newFiles = cateFile.concat(getExtraSource());
        var currentDate = getNowFormatDate();
        var TAG = '#ver:' + currentDate + ' ' + pkg.version;
        var FALLBACK = '';
        var NETWORK = 'NETWORK:\r\n      *';
        var CONTENT = '';
        var maniText = ('\r\n      CACHE MANIFEST\r\n      ' + TAG + '\r\n\r\n      CACHE:\r\n      ' + newFiles.join('\r\n') + '\r\n\r\n      ' + NETWORK + '\r\n\r\n      ' + FALLBACK + '\r\n    ').trim().replace(/^      */gm, '');
        var maniHtml = ('\n      <!doctype html>\n      <html manifest="manifest.appcache">' + (CONTENT || '') + '</html>\n    ').trim().replace(/^      */gm, '');

        fs.exists(baseOutPath, function (exists) {
            if (exists) {
                addCacheFile(maniText, maniHtml);
            }
            else {
                   
                fs.mkdir(baseOutPath, function () {
                    addCacheFile(maniText, maniHtml);
                });
            }
            done();
        });

        function addCacheFile(maniText, maniHtml) {
            fs.writeFileSync(outPutManiFile, maniText);
            fs.writeFileSync(outPutManiHtmlFile, maniHtml);
        }

    });
}

module.exports = MakeManifest;

在 webpack.config.js 中添加：

var   plugins = require('./plugins'),
new plugins.MakeManifest('./build/assets', {
            exclude: [/node_modules[\\\/]react/],
            hash: true,
            assets: true,
            chunks: true,
            chunkModules: true
})

通过webpack 构建后可以看到静态文件目录生成两个文件：

之后，我们可以通过后台打开iframe的方式在第一个页面加载时打开这个静态页面：

export function openUrlByIframe(url) {
    return new Promise(function (resolve, reject) {
        let rdm = Math.random().toString().substr(2);
        let newIframe = document.createElement('iframe');
        newIframe.id = "openUrl" + rdm;
        newIframe.src = url;
        let style = {
            "margin": 0,
            "padding": 0,
            "border": "none",
            "height": "0px",
            "width": "0px",
            "position": "absolute"
        };
        for (let key in style) {
            newIframe.style[key] = style[key];
        }
                let body = document.getElementsByTagName('body')[0];
        if (newIframe.attachEvent) {
            newIframe.attachEvent("onload", function () {
                console.log('预加载完成', url);
                resolve();
            });
        } else {
            newIframe.onload = function () {
                console.log('预加载完成', url);
                resolve();
            };
        }
        body.insertBefore(newIframe, body.firstChild);
    })
}

async storeStaticSource() {
   …
      let sessionPage = '/oas/static/assets/manifest.html';
      await native.openUrlByIframe(sessionPage);
      localStorage.setItem('hadSessionStatic', '1');
      console.info('静态文件缓存完成！');
   …
},

调用：