由于最近开发的个人博客(vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化。本次优化的目标如下:
以上三点结合,就能实现文件的精确缓存。
换句话说,在一年内,如果我的个人博客没有进行任何更新,那同一台电脑在这段时间内访问网站不会发起任何请求;如果有某个文件更新了,只会请求新的文件,旧的文件依旧从缓存读取。
小知识:
webpack 打包
根据文件内容生成文件名
通过配置 output 的 filename 属性可以实现这个需求。filename 属性的值选项中有一个 [contenthash],它将根据文件内容创建出唯一 hash。当文件内容发生变化时,[contenthash] 也会发生变化。
output: { filename: '[name].[contenthash].js', chunkfilename: '[name].[contenthash].js', path: path.resolve(__dirname, '../dist'), },
提取第三方库
由于引入的第三方库一般都比较稳定,不会经常改变。所以将它们单独提取出来,作为长期缓存是一个更好的选择。
这里需要使用 webpack4 的 splitchunk 插件 cachegroups 选项。
optimization: { runtimechunk: { name: 'manifest' // 将 webpack 的 runtime 代码拆分为一个单独的 chunk。 }, splitchunks: { cachegroups: { vendor: { name: 'chunk-vendors', test: /[\\/]node_modules[\\/]/, priority: -10, chunks: 'initial' }, common: { name: 'chunk-common', minchunks: 2, priority: -20, chunks: 'initial', reuseexistingchunk: true } }, } },
除了提取第三方库外,结合 vue 使用 import 动态引入组件还能实现按需加载。
express 设置
app.use((req, res, next) => { // 将 设为 no-cache if(req.url == '/') { res.setheader('cache-control', 'no-cache') } next() }) app.use(express.static('dist', { etag: false, maxage: 1000 * 60 * 60 * 24 * 365, // 缓存一年 })) // 将dist设为根目录
详细的代码可以看一下。
参考资料
到此这篇关于webpack+express实现文件精确缓存的示例代码的文章就介绍到这了,更多相关webpack+express文件精确缓存内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网!
如对本文有疑问, 点击进行留言回复!!
【Shiro 自学笔记七】 什么是 JWT?Shiro 整合JWT
对JsonArray根据JsonObject中的某一字段排序
网友评论