zoukankan      html  css  js  c++  java
  • webpack构建缓存机制-hash值

        了解构建缓存前,需要先思考浏览器对文件缓存机制(浏览器为了优化体验,会有缓存机制)。如果浏览器判断当前资源没有更新,就不会去服务端下载,而是直接使用本地资源。在webpack的构建中,我们通常使用输出文件名output Filenames来决定输出的文件名。

    webpack中对于输出文件名可以有三种hash值:1. hash; 2. chunkhash; 3. contenthash。

    1、hash:使用hash,因为这是工程级别的,即每次修改任何一个文件,所有文件名的hash至都将改变。所以一旦修改了任何一个文件,整个项目的文件缓存都将失效;

    2、chunkhash:extract-text-webpack-plugin定义的contenthash,根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。并且webpack4中支持了异步import功能,顾chunkhash也作用于此。这样就会有个问题,只要对应css或则js改变,与其关联的文件hash值也会改变,但其内容并没有改变呢,所以没有达到缓存意义。顾contenthash的用途随之而来。

    3、contenthash:是针对文件内容级别的,只有你自己模块的内容变了,那么hash值才改变,所以我们可以通过contenthash解决上诉问题。

  • 相关阅读:
    IDEA 快捷键
    Python3开启自带http服务
    redis-creating server tcp listening socket 127.0.0.1:6379: bind No error
    moco的使用方法
    tomcat程序闪退,如何让tomcat不闪退,可以看见报错
    java 项目中Error linstenerStart 报错解决方法
    Linux 常用命令
    TS数据类型及语法
    RabbitMQ的下载和安装
    vue 控制 input 的 disabled
  • 原文地址:https://www.cnblogs.com/babyfacer/p/10532817.html
Copyright © 2011-2022 走看看