zoukankan      html  css  js  c++  java
  • vuecli3打包构建js,css使用hash解决缓存问题

      1.webpack中hash、chunkhash、contenthash区别

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

          chunkhash根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。并且webpack4中支持了异步import功能,固,chunkhash也作用于此

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

        打包构建使用hash:

    chainWebpack: config => {
        // csshansh
        config.plugin('extract-css').tap(args => [{
          filename: `css/[name].[contenthash].css`,
          chunkFilename: `css/[name].[contenthash].css`
        }])
      },
      configureWebpack: config => {
        config.output.filename = `js/[name].[contenthash].js`
        config.output.chunkFilename = `js/[name].[contenthash].js`
    }
    热爱前端技术
  • 相关阅读:
    新建立了个集邮 Blog
    删除8848的mysearch
    VS2005的中国发布会
    免费的PDF生成工具
    FreeBASIC
    今天收到了WinZip发来的免费License
    简洁的 Bash 编程技巧
    benhuan039sblog.wordpress.20121111.xml_.txt
    新浪微博除掉推荐微博
    自制力也是一种力量
  • 原文地址:https://www.cnblogs.com/lcosima/p/14343378.html
Copyright © 2011-2022 走看看