本文介绍了如何开发一个webpack插件，实现禁用axios在IE中的缓存，以及前端缓存的策略。通过理解浏览器的缓存行为，包括内存缓存和硬盘缓存，详细讲解了缓存插件的目标、关键配置点，并展示了最终生成的HTML效果。
// 每日前端夜话 第447篇
// 正文共：3000 字
// 预计阅读时间：15 分钟
❝本文由作者 xfz 授权发布
❞
背景
❝前端缓存方案有很多种，比如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等
html>
"en">
"utf-8">
"x-dns-prefetch-control" content="on">
"viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
"apple-mobile-web-app-status-bar-style" content="black">
"format-detection" content="telephone=no, email=no">
"renderer" content="webkit">"X-UA-Compatible" content="IE=edge">
"HandheldFriendly" content="true">"MobileOptimized" content="320">
"screen-orientation" content="portrait">"x5-orientation" content="portrait">
"full-screen" content="yes">
"x5-fullscreen" content="true">
"browsermode" content="application">
"x5-page-mode" content="app">
"msapplication-tap-highlight" content="no">
"dns-prefetch" href="">
"dns-prefetch" href="//cdn.bootcss.com">
"shortcut icon" href="./assets/images/favicon.png" type="image/x-icon">
xxxx
"app">
"pre-loading">"spline">"line1">"line2">"line3">"line4">"line5">
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 _cssHtml += ' + 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 _html += ';
}return _html;
}class htmlAfterWebpackPlugin {
apply(compiler) {if (compiler.hooks) {// wepback4
compiler.hooks.compilation.tap("htmlAfterWebpackPlugin",
(compilation) => {
HtmlWebpackPlugin.getHooks(
compilation
).beforeAssetTagGeneration.tapAsync("htmlAfterWebpackPlugin", //
(data, cb) => {
ASSETS = data.assets;
cb(null, data);
}
);
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync("htmlAfterWebpackPlugin", //
(data, cb) => {console.log(ASSETS);let { html } = data;
html = html.replace("", cssHelp(ASSETS.css));
html = html.replace("", 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("", cssHelp(assets.css));
html = html.replace("", 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 `
`;
}
最后生成的html是这个酱紫的
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>
<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 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>
好不好，看疗效
第一次
第二次
全剧终
这玩意儿现在已经没啥用了，不过在早先确实帮了我大忙，跟别人吹牛逼，感觉倍儿有面(哈哈，有点自恋了)
点分享
点收藏
点点赞
点在看
扫一扫
1787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
