缓存

把 /dist 目录中的内容部署到服务器上,客户端(通常是浏览器)就能够访问网站此服务器的网站及其资源。而通过网络获取资源是比较耗时的,这就是为什么浏览器要使用缓存这种技术。可以通过命中缓存,以降低网络流量,使网站加载速度更快。然而,如果我们在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新,就会使用它的缓存版本。

这里通过output.filename的修改,实现在文件内容变化后,能够请求到新的文件。

output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},

虽然内容并未发生改变,但由于入口chunk包含了webpack的manifest,导致chunkhash发生了变换,因此需要将manifest分离出去。

webpack.prod.js添加

    optimization:{
splitChunks: {
chunks: "all"
},
      runtimeChunk:{
            name: 'manifest'
         }
    }

此时,增加了manifest单独的chunk。在文件内容不发生改变时,filename不变。

当改变index.js文件中的内容后,

app的chunkhash发生了改变,而print,manifest对应的chunkhash不变。

webpack指南(三)缓存的更多相关文章

  1. App架构师实践指南三之基础组件

    App架构师实践指南三之基础组件 1.基础组件库随着时间的增长,代码量的逐渐积累,新旧项目之间有太多可以服用的代码.下面是整理的公共代码库. 2.关于加密密钥的保护以及网络传输安全是移动应用安全最关键 ...

  2. C++11 并发指南三(Lock 详解)

    在 <C++11 并发指南三(std::mutex 详解)>一文中我们主要介绍了 C++11 标准中的互斥量(Mutex),并简单介绍了一下两种锁类型.本节将详细介绍一下 C++11 标准 ...

  3. P6 EPPM R16.1安装与配置指南(三)

    P6 EPPM R16.1安装与配置指南(三) 解压:V137390-01.zip 修改 D:\P6_R161\p6suite\database\dbsetup.bat   的行 SET JAR_FI ...

  4. Swift语言指南(三)--语言基础之整数和浮点数

    原文:Swift语言指南(三)--语言基础之整数和浮点数 整数 整数指没有小数的整数,如42,-23.整数可以是有符号的(正数,零,负数),也可以是无符号的(正数,零). Swift提供了8,16,3 ...

  5. webpack笔记三 管理输出

    webpack笔记三 管理输出 增加src/print.js: export default function printMe() { console.log('I get called from p ...

  6. C++11 并发指南三(Lock 详解)(转载)

    multithreading 多线程 C++11 C++11多线程基本使用 C++11 并发指南三(Lock 详解) 在 <C++11 并发指南三(std::mutex 详解)>一文中我们 ...

  7. 【C/C++开发】C++11 并发指南三(std::mutex 详解)

    本系列文章主要介绍 C++11 并发编程,计划分为 9 章介绍 C++11 的并发和多线程编程,分别如下: C++11 并发指南一(C++11 多线程初探)(本章计划 1-2 篇,已完成 1 篇) C ...

  8. ReadHub项目Kotlin版开发指南(三、MVP架构)

    ReadHub项目Kotlin版转换指南(一.环境搭建) ReadHub项目Kotlin版转换指南(二.数据库和网络请求) ReadHub项目Kotlin版转换指南(三.MVP架构) Android ...

  9. 转:Webpack 指南(整理 草稿)

    基础 安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm.用 npm 全局安装 Webpack: $ npm install webpack -g 通常我们会将 Webpa ...

随机推荐

  1. Spark RDD----pyspark第四次作业

    1.pyspark交互式编程 查看群里发的“data01.txt”数据集,该数据集包含了某大学计算机系的成绩,数据格式如下所示: Tom,DataBase,80 Tom,Algorithm,50 To ...

  2. ES6系列-什么是ES6?新手应该怎么理解

    ECMAScript 是什么 很多初学者都很困惑,ECMAScript是什么?它跟JavaScript有什么关系? 大家注意到了吗?从题目中我们就可以看出来了,ECMAScript是JavaScrip ...

  3. token认证和理解

    认知篇:https://blog.csdn.net/FYGu18/article/details/89345490 token失效篇认知:https://segmentfault.com/q/1010 ...

  4. 文件上传漏洞(pikachu)

    文件上传漏洞 文件上传功能在web应用系统很常见,比如很多网站注册的时候需要上传头像,附件等等.当用户点击上传按钮后,后台会对上传的文件进行判断,比如是否是指定的类型.后缀名.大小等等,然后将其按照设 ...

  5. Spring MVC 中的http Caching

    文章目录 过期时间 Last-Modified ETag Spring ETag filter Spring MVC 中的http Caching Cache 是HTTP协议中的一个非常重要的功能,使 ...

  6. springmvc返回不带引号的字符串

    springmvc返回不带引号的字符串项目使用springboot开发的,大部分出参为json,使用的fastJson,现在有的接口需要返回一个success字符串,发现返回结果为“success”, ...

  7. 解决从dockerhub上下载debian:jessie失败

    解决从dockerhub上下载debian:jessie失败 笔者使用docker build 构建镜像出现下面的错误 Step 1/12 : FROM debian:jessie Get https ...

  8. 【linux题目】第三关

    1. 解释下什么是GPL,GNU,自由软件? 2. 如何选择Linux操作系统版本? 3. 安装系统时如何给Linux操作系统分区? 4. 描述Linux系统的启动过程? 5. 简要说出20个Linu ...

  9. Spring Boot Actuator H2 RCE复现

    0x00 前言 Spring Boot框架是最流行的基于Java的微服务框架之一,可帮助开发人员快速轻松地部署Java应用程序,加快开发过程.当Spring Boot Actuator配置不当可能造成 ...

  10. JavaScript 循环判断练习题

    JavaScript 循环判断练习题 小明有一组水果("苹果","梨子","香蕉","葡萄","西瓜" ...