webpack4.0 缓存

webpack 中文官网还没有更新，webpack.optimize.CommonsChunkPlugin已经不再用。更换为config.optimization.splitChunks。

关于几点概念，自己的理解。

manifest： wepack 解析 import export ，转换为 __webpack_require__方法
Runtime： runtime会根据 manifest检索出背后对应的模块，这里面还包括在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。
vendors:你的源码会依赖的任何第三方的 library 或 “vendor” 代码。也就是第三方库文件。
当配置如下时，会打包一个 js 文件。
webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack')
module.exports = {
    entry: {
        app: './src/index.js',
        // print: './src/print.js'
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },

    plugins: [
        
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ]
}

而缓存这一节，主要是从打包一个 js 文件里提取出Runtime，以及vendors。因为一般更改的主要的逻辑代码，这两部分更改的不多，特别是vendors。这样做可以使浏览器加载速度更快，不再重新下载未改过的文件。

在配置文件里增加两个东西：
1、optimization.runtimeChunk，这个可以做到把runtime，vendors 提取出来，做到代码分离。
2、webpack.HashedModuleIdsPlugin插件，使用这个插件可以使，vendor的 hash 值不变。

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack')
module.exports = {
    entry: {
        app: './src/index.js',
        // print: './src/print.js'
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
  +  optimization: {
    +    runtimeChunk: 'single',
      +   splitChunks: {
        +   cacheGroups: {
          +       vendor: {
            +           test: /[\\/]node_modules[\\/]/,
              +             name: 'vendors',
                +           chunks: 'all'
                  +   }
               +}
         +}
    +},
    plugins: [
      +  new webpack.HashedModuleIdsPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ]
}

运行命令npm run build，查看结果。

Built at: 08/15/2019 11:33:37 AM
                          Asset       Size  Chunks             Chunk Names
    app.26d4bfd00f0dc1834ba9.js  450 bytes       0  [emitted]  app
                     index.html  362 bytes          [emitted]  
runtime.3964ebb6f53a392eb988.js   1.46 KiB       1  [emitted]  runtime
vendors.fe5b987e58f49faa402a.js   69.7 KiB       2  [emitted]  vendors

修改 src 目录下，index.js、或者 print.js 的逻辑。再次运行 build，发现只有app.26d4bfd00f0dc1834ba9.js 的 hash 变了，另外两个runtime.3964ebb6f53a392eb988.js、vendors.fe5b987e58f49faa402a.js 的 hash 值没有变化。

例子链接：/缓存/demo16/