Webpack 文件指纹和代码压缩

文件指纹

什么是文件指纹？

• 打包后输出文件名的后缀
• 通常用于版本管理

• hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存

  文件指纹如何生成

  Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的 hash 值就会更改。Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会⽣成不同的 chunkhash 值，Contenthash：根据⽂件内容来定义 hash ，⽂件内容不变，则 contenthash 不变

• Hash：和整个项目的构建相关，webpack打包阶段会生成Compiler，Compilation。webpack启动那一次，会生成Compiler（初始化一次）。但是每一次只要项目文件有修改，，Compilation都会发生变化。Compilation变换就会影响Hash的变换，整个项目构建的 hash 值就会更改。如果css/js都是使用hash作为文件指纹的话，那么某一个js或者css发生改变，所有打包出来的css/js指纹都会变化。不利于缓存

• Chunkhash：采用hash计算的话，每一次构建后生成的哈希值都不一样，即使文件内容压根没有改变。这样子是没办法实现缓存效果，我们需要换另一种哈希值计算方式，即chunkhash,chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响
• Contenthash：根据文件内容来定义 hash ，文件内容不变，则 contenthash 不变。某个页面既有js资源，又有css资源。如果css资源也使用Chunkhash。如果修改了js。由于css资源使用了Chunkhash，就会导致css内容没有变化，发布上线的文件却发生了变化。因此，通常对css资源使用Contenthash。这个时候可以使用mini-css-extract-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建

不同文件的Hash设置

JavaScript文件的Hash设置

Js文件hash设置在webpack.config.js或者vue.config.js中的output模块，一般是filename后追加hash模式和长度，一般是chunkHash或者ContentHash

module.exports = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name][chunkhash:8].js',
        path: __dirname + '/dist'
    }
};

Css文件的设置

设置MiniCssExtractPlugin的filename，使用contenthash

module.exports = {
    entry: {
        index: './src/index.js',
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        })
    ]
};

各文件设置最优解决方案

https://juejin.im/post/5a4502be6fb9a0450d1162ed

• 如果html css vue js 文件的策略都是hash的话，那么这些所有文件的后缀都会是一样的hash值，这就是hash被称作根据项目构建相关。即使代码没有变更，重新构建依然会生成新的hash值，更新文件名称后缀，所以hash无法实现缓存效果
• chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。没有指明是否和构建相关，应该是构建时候也会生成新的hash值
• contentHash 文件内容不变则hash不变，之前的一些情况可能存在js文件引用css文件的可能。如果此时都用chunkhash，修改js文件，则存在css文件没有变化，却在构建时候更改了hash

代码压缩

主要涉及html css 和js的文件压缩，可以使用webpack4内置的uglifyjs-webpack-plugin一级html-webpack-plugin

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    //压缩参数
    )]
};