webpack插件开发之秒开缓存插件

Ryun
927 阅读6分钟

往期文章：

背景

前端缓存方案有很多种，比如http协商缓存、PWA劫持、from memory cache、from disk cache、App容器缓存等，本文是基于webpack角度的缓存方案，现代浏览器对缓存支持的越来越好，该方案现在已经过时，不过设计思路还是值得学习的，那我们开始吧...

开整之前，我们先来了解一下浏览器的缓存策略

  • from disk cache：同上类似，此资源是从磁盘当中取出的，也是在已经在之前的某个时间加载过该资源，不会请求服务器但是此资源不会随着该页面的关闭而释放掉，因为是存在硬盘当中的，下次打开仍会from disk cache（from disk cache 会花一点时间）

在浏览器开发者工具的Network的Size栏会出现的三种情况：

  • from memory cache
  • from disk cache
  • 资源本身大小（比如：100.6K）

三级缓存原理

  • 1.先查找内存，如果内存中存在，从内存中加载；
  • 2、如果内存中未查找到，选择硬盘获取，如果硬盘中有，从硬盘中加载；
  • 3、如果硬盘中未查找到，那就进行网络请求；
  • 4、加载到的资源缓存到硬盘和内存；

HTTP状态码及区别

  • 200 form memory cache

不请求服务器，表示已经加载过该资源并且缓存在了内存当中，直接从内存中读取缓存。浏览器关闭后，数据将不存在（资源被释放掉了），再次打开相同的页面时，不会出现from memory cache（一般脚本、字体、图片会存在内存当中）

  • 200 from disk cache

不请求服务器，表示在之前的某个时间加载过该资源，直接从硬盘中读取缓存，关闭浏览器后，数据依然存在，此资源不会随着该页面的关闭而释放掉下次打开仍然会是from disk cache（一般非脚本会存在磁盘当中，如css等）

  • 200 资源大小数值

请求服务器

  • 304 Not Modified 协商报文大小

请求服务器，发现数据没有更新，服务器返回此状态码。然后从缓存中读取数据，也就是所谓的协商缓存

执行顺序（chrome）

访问-> 200 -> 退出浏览器 -> 第二次进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)

缓存插件目标

  • 前端缓存，将打包出来的 runtime、vendor、index文件存储在localStorage中，增量更新
  • 初次加载时请求服务器获取资源，第二次加载则请求localStorage中存储的脚本
  • 当有增量更新时，localStorage也是增量更新

生产环境html模版

  • 使用占位符
  • 动态prefetch
  • 动态polyfill
  • 通过CDN方式引入项目基础库，比如 react、react-dom等
<!--injectcss-->
<!--injectjs-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-dns-prefetch-control" content="on">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no, email=no">
  <meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="HandheldFriendly" content="true"><meta name="MobileOptimized" content="320">
  <meta name="screen-orientation" content="portrait"><meta name="x5-orientation" content="portrait">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="browsermode" content="application">
  <meta name="x5-page-mode" content="app">
  <meta name="msapplication-tap-highlight" content="no">
  <link rel="dns-prefetch" href="<%= htmlWebpackPlugin.options.prefetch %>">
  <link rel="dns-prefetch" href="//cdn.bootcss.com">
  <link rel="shortcut icon" href="./assets/images/favicon.png" type="image/x-icon">
  <style>*{margin:0;padding:0;}html,body{height:100%;}#pre-loading{position:absolute;width:100%;height:100%;z-index:10;transition:opacity 500ms;background:#f5f5f9;}#pre-loading.loaded{opacity:0;}#pre-loading.end{display:none;}.spline{position:absolute;width:80px;height:50px;left:0;text-align:center;z-index:11;left:50%;top:50%;margin:-25px 0 0 -40px;}.spline>div{display:inline-block;width:6px;height:100%;background:rgb(74, 76, 91);-webkit-animation:strachdelay 1.2s infinite ease-in-out;animation:strachdelay 1.2s infinite ease-in-out;margin:0 2px;}.spline .line2{-webkit-animation-delay:0.1s;}.spline .line3{-webkit-animation-delay:0.2s;}.spline .line4{-webkit-animation-delay:0.3s;}.spline .line5{-webkit-animation-delay:0.4s;}@-webkit-keyframes strachdelay{0%,40%,100%{-webkit-transform:scaleY(.4);}20%{-webkit-transform:scaleY(1);}}@keyframes strachdelay{0%,40%,100%{transform:scaleY(.4);}20%{transform:scaleY(1);}}</style>
  <!--injectcss-->
  <title>xxxx</title>
</head>
<body>
  <div id="app"></div>
  <div id="pre-loading">
    <div class="spline">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
      <div class="line4"></div>
      <div class="line5"></div>
    </div>
  </div>
  <script src="https://polyfill.io/v3/polyfill.js"></script>
  <script src="https://cdn.bootcss.com/react/16.7.0/umd/react.production.min.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.bootcss.com/react-router-dom/4.2.2/react-router-dom.min.js"></script>
  <script src="https://cdn.bootcss.com/mobx/5.1.0/mobx.umd.min.js"></script>
  <script src="https://cdn.bootcss.com/mobx-react/5.2.5/index.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
  <!--injectjs-->
</body>
</html>

webpack配置关键点

webpack3 配置要点

  • externals
  • code split
  • html-webpack-plugin
    • inject: false，将chunks注入模版的活交给自定义插件来做
    • 注入prefetch变量
output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: publicPath,
    filename: 'scripts/[name].[chunkhash:5].js',
},
devtool: false,
externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router-dom': 'ReactRouterDOM',
    'axios': 'axios',
    'mobx': 'mobx',
    'mobx-react': 'mobxReact'
},
//抽离功能js
new webpack.optimize.CommonsChunkPlugin({
   name: 'vendor',
   minChunks: function(module){
      return module.context && module.context.indexOf("node_modules") !== -1;
   }
}),
new webpack.optimize.CommonsChunkPlugin({
   name: 'runtime',
   minChunks: Infinity
}),
new HtmlWebpackPlugin({
   filename: 'index.html',
   template: path.join(__dirname, '../app/.html'),
   minify:{  //压缩HTML文件
      removeComments:true,  //移除HTML中的注释
      collapseWhitespace:true,  //删除空白符与换行符
      removeEmptyAttributes:true,
   },
   prefetch:
        cf.assetsPublicPath[cf.assetsPublicPath.length - 1] == "/"
          ? cf.assetsPublicPath.substr(0, cf.assetsPublicPath.length - 1)
          : cf.assetsPublicPath,
   chunks: ['vendor', 'runtime', 'index'],
   inject: false
}),
// 因为是处理产出文件，因此将插件放在HtmlWebpackPlugin后面
new htmlAfterWebpackPlugin(),

webpack4 配置要点

  • externals
  • code split
  • html-webpack-plugin
    • inject: false，将chunks注入模版的活交给自定义插件来做
    • 注入prefetch变量
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router-dom': 'ReactRouterDOM',
    'axios': 'axios',
    'mobx': 'mobx',
    'mobx-react': 'mobxReact'
  },
  /**
   * 优化部分包括代码拆分
   * 且运行时（manifest）的代码拆分提取为了独立的 runtimeChunk 配置
   */
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        // 提取 node_modules 中代码
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all",
        },
        commons: {
          // async 设置提取异步代码中的公用代码
          chunks: "async",
          name: "commons-async",
          /**
           * minSize 默认为 30000
           * 想要使代码拆分真的按照我们的设置来
           * 需要减小 minSize
           */
          minSize: 0,
          // 至少为两个 chunks 的公用代码
          minChunks: 2,
        },
        styles: {
          name: "index",
          test: /\.(css|scss)$/,
          chunks: "all",
          enforce: true,
        },
      },
    },
    //   /**
    //    * 对应原来的 minchunks: Infinity
    //    * 提取 webpack 运行时代码
    //    * 直接置为 true 或设置 name
    //    */
    runtimeChunk: {
      name: "runtime",
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_debugger: true,
            drop_console: false,
          },
        },
      }),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },
    plugins: [
    // 提取css
    new MiniCssExtractPlugin({
      filename: `${cf.css}/[name].[contenthash:5].css`,
    }),
    // css: tree-shaking
    new PurgecssPlugin({
      paths: glob.sync(`${CssTreeShakPaths}/**/*`, { nodir: true }),
    }),
    new OptimizeCSSAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require("cssnano"),
    }),
    // 开启缓存
    new HardSourceWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: resolve(__dirname, "../src/index_pro.html"),
      title: "后台管理系统",
      prefetch:
        cf.assetsPublicPath[cf.assetsPublicPath.length - 1] == "/"
          ? cf.assetsPublicPath.substr(0, cf.assetsPublicPath.length - 1)
          : cf.assetsPublicPath,
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
    }),
    // 因为是处理产出文件，因此将插件放在HtmlWebpackPlugin后面
    new htmlAfterWebpackPlugin(),
    // 代码打包分析
    // new BundleAnalyzerPlugin({ analyzerPort: 3011 }),
  ],

htmlAfterWebpackPlugin.js

第一步：验证 html-webpack-plugin 钩子是否可以拿到chunks、

  • webpack3 与 webpack4 的钩子不一样，其他逻辑保持一致
  • 通过 emit 生成的chunks，获取 css 和 js 的 cdn地址
  • 用资源的cdn地址，模版替换占位符
  • 要保证js加载的顺序
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 为webpack4保存chunks
let ASSETS = {};

// 给js排序，为了保证按顺序加载，防止有的htmlWebpackPlugin不安套路出牌
function sortByOrders(arrs) {
    arrs = arrs.sort((mapf, maps) => {
        let fIndex = 3, sIndex = 3;
        if (mapf.indexOf('runtime') > -1) {
            fIndex = 0;
        } else if (mapf.indexOf('vendor') > -1) {
            fIndex = 1;
        } else if (mapf.indexOf('index') > -1) {
        	fIndex = 2;
        }
        if (maps.indexOf('runtime') > -1) {
            sIndex = 0;
        } else if (maps.indexOf('vendor') > -1) {
            sIndex = 1;
        } else if (maps.indexOf('index') > -1) {
            sIndex = 2;
        }
        return fIndex > sIndex;
    });
    return arrs;
}

function cssHelp(arrs){
    let _cssHtml = '';
    //处理css
    for(let i=0;i<arrs.length;i++){
    	_cssHtml += '<link rel="stylesheet" type="text/css" href="' + arrs[i] + '"/>'
    }
    return _cssHtml;
}

function jsHelp(arrs){
    let maps = {};
    let reg= /.+\/((\w|-)+)\.((\w{5})\.)?\w+.js$/;
    arrs = sortByOrders(arrs);
    let _html = '';
    console.log(arrs);

    for(let i=0;i<arrs.length;i++){
        _html += '<script src="' + arrs[i] + '"></script>';
    }

    return _html;
}

class htmlAfterWebpackPlugin {
  apply(compiler) {
    if (compiler.hooks) {
      // wepback4
      compiler.hooks.compilation.tap(
        "htmlAfterWebpackPlugin",
        (compilation) => {
          HtmlWebpackPlugin.getHooks(
            compilation
          ).beforeAssetTagGeneration.tapAsync(
            "htmlAfterWebpackPlugin", // <-- Set a meaningful name here for stacktraces
            (data, cb) => {
              ASSETS = data.assets;
              cb(null, data);
            }
          );

          HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
            "htmlAfterWebpackPlugin", // <-- Set a meaningful name here for stacktraces
            (data, cb) => {
              console.log(ASSETS);
              let { html } = data;
              html = html.replace("<!--injectcss-->", cssHelp(ASSETS.css));
              html = html.replace("<!--injectjs-->", jsHelp(ASSETS.js));
              data.html = html;

              cb(null, data);
            }
          );
        }
      );
    } else {
      // webpack3
      compiler.plugin("compilation", (compilation) => {
        compilation.plugin(
          "html-webpack-plugin-before-html-processing",
          (data, cb) => {
            let assets = data.assets;
            let html = data.html;
            html = html.replace("<!--injectcss-->", cssHelp(assets.css));
            html = html.replace("<!--injectjs-->", jsHelp(assets.js));
            data.html = html;
            cb(null, data);
          }
        );
      });
    }
  }
}

module.exports = htmlAfterWebpackPlugin;

第二步：实现缓存

  • 对第一步的代码进行修改
  • css还是按原来的方式处理，主要处理js
  • 第一次访问：将js存储在localStorage中
  • 第二次访问，从localStorage中获取js资源
  • webpack增量更新资源，会增量更新到localStorage中（减少更新带的资源获取成本） 修改 jsHelp 方法
function jsHelp(arrs) {
  let maps = {};
  let reg = /.+\/((\w|-)+)\.((\w{5})\.)?\w+.js$/;
  arrs = sortByOrders(arrs);
  arrs = sortByOrders(arrs);
  arrs.forEach((arr) => {
    let regRet = reg.exec(arr);
    if (regRet) {
      regRet = regRet[1];
      maps[regRet] = arr;
    }
  });

  console.log(Object.keys(maps));

  return `
	<script>
		var jsMap = ${JSON.stringify(maps)};
		var createScript = function(content) {
            var scriptDom = document.createElement('script');
            scriptDom.innerHTML = content;
            document.body.appendChild(scriptDom);
        }
        var getScript = function(key) {
            axios.get(jsMap[key]).then(function(value) {
                localStorage.setItem(key, jsMap[key]);
                localStorage.setItem(jsMap[key], value.data);
                // 保证末尾的js最后一个插入页面
                if(key === 'index'){
                    setTimeout(function(){
                        createScript(value.data);
                    },0);
                }else{
                    createScript(value.data);
                }
            });
        };
        var jsMapKeys = Object.keys(jsMap);
        for(var i=0;i<jsMapKeys.length;i++){
            var key = jsMapKeys[i];
            (function(vkey) {
                var val = localStorage.getItem(vkey);
                if (!val) {
                    getScript(vkey);
                } else {
                    if (val === jsMap[vkey]) {
                        var scriptValue = localStorage.getItem(jsMap[vkey]);
                        scriptValue && createScript(scriptValue);
                    } else {
                        localStorage.removeItem(val);
                        getScript(vkey);
                    }
                }
            }(key));
        }
    </script>
    `;
}

最后生成的html是这个酱紫的

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta http-equiv=x-dns-prefetch-control content=on>
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta http-equiv=X-UA-Compatible content="ie=edge">
    <meta name=screen-orientation content=portrait>
    <meta content=yes name=apple-mobile-web-app-capable>
    <meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
    <meta name=format-detection content="telephone=no">
    <meta name=full-screen content=yes>
    <meta name=x5-fullscreen content=true>
    <title>后台管理系统</title>
    <link rel=dns-prefetch href=//127.0.0.1:8080>
    <link rel=dns-prefetch href=//cdn.bootcss.com>
    <link rel=stylesheet href=https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css>
    <link rel=stylesheet href=https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css>
    <!-- 插入的css -->
    <link rel="stylesheet" type="text/css" href="//127.0.0.1:8080/css/index.ddc73.css" />
</head>

<body>
    <div id=app></div>
    <script src=https://polyfill.io/v3/polyfill.js></script>
    <script src=https://cdn.bootcss.com/react/16.7.0/umd/react.production.min.js></script>
    <script src=https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.production.min.js></script>
    <script src=https://cdn.bootcss.com/react-router-dom/4.2.2/react-router-dom.min.js></script>
    <script src=https://cdn.bootcss.com/mobx/5.1.0/mobx.umd.min.js></script>
    <script src=https://cdn.bootcss.com/mobx-react/5.2.5/index.min.js></script>
    <script src=https://cdn.bootcss.com/axios/0.18.0/axios.js></script>
    <!-- 插入的动态脚本 -->
    <script>
        var jsMap = {
          "runtime": "//127.0.0.1:8080/js/runtime.15e89.js",
          "vendor": "//127.0.0.1:8080/js/vendor.5cc2c.js",
          "index": "//127.0.0.1:8080/js/index.bdb95.js",
        };
        var createScript = function (content) {
            var scriptDom = document.createElement('script');
            scriptDom.innerHTML = content;
            document.body.appendChild(scriptDom);
        }
        var getScript = function (key) {
            axios.get(jsMap[key]).then(function (value) {
                localStorage.setItem(key, jsMap[key]);
                localStorage.setItem(jsMap[key], value.data);
                // 保证末尾的js最后一个插入页面
                if (key === 'index') {
                    setTimeout(function () {
                        createScript(value.data);
                    }, 0);
                } else {
                    createScript(value.data);
                }
            });
        };
        var jsMapKeys = Object.keys(jsMap);
        for (var i = 0; i < jsMapKeys.length; i++) {
            var key = jsMapKeys[i];
            (function (vkey) {
                var val = localStorage.getItem(vkey);
                if (!val) {
                    getScript(vkey);
                } else {
                    if (val === jsMap[vkey]) {
                        var scriptValue = localStorage.getItem(jsMap[vkey]);
                        scriptValue && createScript(scriptValue);
                    } else {
                        localStorage.removeItem(val);
                        getScript(vkey);
                    }
                }
            }(key));
        }
    </script>
</body>
</html>

好不好，看疗效

第一次

第二次

全剧终

这玩意儿现在已经没啥用了，不过在早先确实帮了我大忙，跟别人吹牛逼，感觉倍儿有面（哈哈，有点自恋了）

经过一周的时间，重新对这几年使用webpack4的感悟进行简单的整理，作为和 webpack4 道别礼，希望以后不要再见了...

webpack5 正向我们招手，读了webpack5源码，得出一个结论：v5之前所有的webpack技巧和插件、loader...，全被遗弃了，我特么心态崩了，已无力吐槽了...

敬请期待：他来了，他来了，他带着绿帽走来了（webpack5）

夜深了，该回家觉觉了～～

❤️ 加入我们

字节跳动 · 幸福里团队

Nice Leader：高级技术专家、掘金知名专栏作者、Flutter中文网社区创办者、Flutter中文社区开源项目发起人、Github社区知名开发者，是dio、fly、dsBridge等多个知名开源项目作者

期待您的加入，一起用技术改变生活！！！

招聘链接: job.toutiao.com/s/JHjRX8B

avatar
文章
阅读
粉丝
相关推荐
webpack-bundle-analyzer插件快速入门
37k阅读
 · 
49点赞
干货！撸一个webpack插件(内含tapable详解+webpack流程)
31k阅读
 · 
636点赞
🔥Webpack 插件开发如此简单！
11k阅读
 · 
173点赞
探寻 webpack 插件机制
5.8k阅读
 · 
67点赞
一步一步的了解webpack4的splitChunk插件
37k阅读
 · 
544点赞
webpack插件机制之Tapable
6.6k阅读
 · 
148点赞
揭秘webpack插件工作流程和原理
13k阅读
 · 
210点赞
webpack 插件配置 —— HTML Webpack Plugin
8.0k阅读
 · 
9点赞
面试官：了解webpack插件？写过webpack插件吗？
4.0k阅读
 · 
150点赞
浏览器缓存和webpack缓存配置
7.5k阅读
 · 
110点赞

友情链接：