localStorage纯前端缓存实践
8】localStorage缓存js实践
思路:
- js包都不以script标签的形式插入到html中，而是需要以dom的形式动态设置script，并写入脚本。
- 判断bundle缓存是否过期：使用htmlwebpackplugin打包时不插入script标签，而是插入
z89e0af6.bundle.js但是不让它显示。（我们需要手动写插件进行拦截）
- 在index.html中写脚本进行判断。
Dll动态链接库
拆一些公共的文件：react/react-dom/vue/jQuery，单独打包到一个文件。最后将这个文件放在cdn上。（也可以在开发时使用dll，链接库只需要被构建一次，大大提升项目构建效率）
主要使用两个webpack内置的插件：DllPlugin、DllReferencePlugin
- DllPlugin：生成动态链接库dll的插件。（在打包比较大的公共框架（比如react、vue、jQuery）文件的webpack打包配置文件中使用）
- DllReferencePlugin：用来在项目中引用动态链接库的插件（在构建项目的webpack打包配置文件中使用）
步骤一：
单独启webpack配置文件打包动态链接库。我们在项目根目录下创建一个webpack_dll.config.js文件（用于打包生成动态链接库），会用到DllPlugin插件
//webpack_dll.config.js
//单独打包react用动态链接库Dll
const path = require('path');
const webpack = require('webpack')
module.exports = {
mode: 'development',
entry: {
/*把项目需要所有的 react 相关的放到一个单独的动态链接库
又例如：vue: ['vue', 'vuex', 'vue-router'],
jquery: ['jQuery']*/
react: ['react', 'react-dom']
},
output: {
filename: '[name].dll.js',//打包后的文件名称
path: path.resolve(__dirname, 'dll'),//输出到的文件夹
library: '_dll_[name]'//存放动态链接库的全局变量名称，加上_dll_是为了防止全局变量冲突
},
plugins: [
//使用webpack内置的生成动态链接库dll的插件（会生成两个文件，一个是打包好的库代码，另一个是映射文件）
new webpack.DllPlugin({
/*动态链接库的全局变量名称，需要和 output.library 中保持一致
该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
例如 react.manifest.json 中就有 "name": "_dll_react"*/
name: '_dll_[name]',
// 描述动态链接库的 manifest.json 文件输出时的文件名称
path: path.join(__dirname, 'dll', '[name].manifest.json'),
})
]
}
步骤二：
此时，我们为了方便，需要在package.json中创建打包动态链接库的脚本命令：
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
...
"dll": "webpack --mode development --config webpack_dll.config.js"
},
...
}
此时我们就可以执行命令npm run dll，将动态链接库打包好了。并输出到dll文件夹下，生成了两个文件react.dll.js（打包的库代码）和react.manifest.json（动态链接映射文件）（这个打包好的动态链接库可以放到cdn上进行优化）
步骤三：
在html文件中以script标签的形式手动插入动态链接库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack测试打包</title>
<!-- 库文件必须要放在最前面 -->
<script defer src="../dll/react.dll.js"></script>
<script defer src="theory_analysis_38a7916d0fdc58ecb1c9.bundle.js"></script>
</head>
<body>
<h1>头像</h1>
<div id="app"></div>
</body>
</html>
这时候还不行，因为虽然我们这样引入了动态链接库，但是bundle.js打包出来的代码还不知道该怎么去使用这个动态链接库，所以还得在项目打包的时候进行使用DllReferencePlugin
步骤四：
项目webpack配置中使用DllReferencePlugin进行引用库。使用了这个插件，webpack打包的时候就优先会去使用dll动态链接库中的变量，不会再去react这些框架了。
//webpack.config.js
const path = require('path')
const webpack = require('webpack')
//生成一个html模板
const HtmlWebpackPlugin = require('html-webpack-plugin')
//启动时清空dist文件夹
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: {//入口
theory_analysis: './src/theory_analysis.js'
},
mode: 'development',
output: {
filename: '[name]_[hash].bundle.js',
path: path.join(__dirname, 'dist')//打包到的文件夹
},
plugins: [//使用插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
cache: false
}),
//引用动态链接库的插件(告诉webpack我们用了哪些动态链接库，该怎么使用这些dll)
new webpack.DllReferencePlugin({
//需要找到生成的dll动态链接库的manifest映射文件
manifest: path.resolve(__dirname, 'dll', 'react.manifest.json')
//manifest: require('./dll/react.manifest.json'),//这样也可以
})
],
.....
}
这是我打包的js文件，使用了react和react-dom
//theory_analysis.js
import React from 'react'
import { render } from 'react-dom'
const App = () => {
return <div>这是react-app</div>
}
render(<App />, document.getElementById('app'))
BundleNamePlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
class BundleNamePlugin {
apply(compiler) {
compiler.hooks.compilation.tap('BundleNamePlugin', (compilation) => {
HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(
'alterPlugin',
(data, end) => {
data = this.processTags(data, compilation)
end(null, data)
}
)
})
}
processTags(data, compilation) {
//data是htmlwebpackplugin要插入（等操作）的标签信息
let bodyTags = data.bodyTags
//将bundlejsName插入到html中
let newTag = {
tagName: 'div',
voidTag: false,
attributes: { style: 'display:none', id: "bundleName" }
}
let bundleName
data.headTags.forEach(item => {
if (item.tagName === 'script') {
bundleName = item.attributes.src
}
})
newTag.innerHTML = bundleName
bodyTags.push(newTag)
return {
...data, bodyTags, headTags: [] //本来要插入bundlejs的script标签,这里就把headerTags置空，不插入
}
}
}
module.exports = BundleNamePlugin
缓存判断脚本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>雷浩简历</title>
<link crossorigin="" rel="shortcut icon" type="image/x-icon"
href="https://personal-financ.oss-cn-chengdu.aliyuncs.com/cdn/111.png" />
</head>
<body>
<div id="app"></div>
<div style="display:none" id="bundleName">
/z89e0af6.bundle.js
</div>
</body>
<script>
//判断本地是否有dll（dll的都是依赖包，不会变的不需要设置hash名）
var ReactDll = window.localStorage.getItem('react.dll.js')//动态链接库的名字
//从div中获取bundle的hash文件名（需要打包的时候提前植入html中）
var bundleName = document.getElementById('bundleName').innerText
//判断本地是否有Bundle
var Bundle = window.localStorage.getItem(getFilename(bundleName))
//bundle的缓存过期则移除
if (hasBundle() !== getFilename(bundleName)) {
localStorage.removeItem(hasBundle())
}
if (ReactDll) {//reactDll有缓存
eval.call(window, ReactDll)//执行缓存函数必须挂载到全局，否则会被垃圾回收
if (hasBundle() === getFilename(bundleName)) {//Bundle没过期
eval.call(window, Bundle)//执行缓存函数必须挂载到全局，否则会被垃圾回收
} else {//Bundle过期
cacheBundle()
}
} else {//否则都不用缓存
cacheReactDll(cacheBundle)//一定要用回调，因为Bundle依赖于Dll，必须先执行Dll，否则报错
}
//第一次获取并缓存Dll
function cacheReactDll(cb) {
FetchFile('https://personal-financ.oss-cn-chengdu.aliyuncs.com/cdn/react.dll.js', cb)//动态链接库放在cdn
}
//第一次获取并缓存Bundle
function cacheBundle() {
FetchFile(location.href + bundleName)
}
//首次获取资源js文件,并写入到localstorage
function FetchFile(url, cb) {
fetch(url)
.then(res => res.blob())
.then(myBlob => {
var reader = new FileReader()
reader.onload = () => {
var script = document.createElement('script')
script.innerHTML = reader.result
script.type = 'text/javascript';
document.querySelector('head').appendChild(script)
window.localStorage.setItem(getFilename(url), reader.result)
cb && cb();
}
reader.readAsText(myBlob)
})
}
//通过url获取文件名
function getFilename(url) {
var temp = url.split('/')
return temp[temp.length - 1]
}
//判断本地是有有bundle，并返回文件名
function hasBundle() {
return Object.keys(localStorage).find(item => item.includes('bundle'))
}
</script>
</html>
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
