webpack官网 - 缓存 注意!!!是 lodash ,不是 loadsh×

    我们一般将第三方库(library)(例如 loadsh 或 react) 提取到单独的 vendor chunk文件中(推荐该做法!)

    原因:因为一般第三方库很少像本地的源代码那样频繁修改。— 我们就可以缓存 因此通过实现以上步骤,利用 client(如浏览器端)的长效缓存机制命中缓存来消除请求,并减少向 server 获取资源,同时还能保证 client代码和 server 代码版本一致

    怎么实现?
    通过 splitChunkPlugin 插件的 cacheGroups 选项来实现。我们在 optimization.splitChunks 中添加如下 cacheGroups 参数,如第二张图所示。
    1)未在 optimization.splitChunks 中添加 cacheGroups 参数之前,打包后的main文件如下所示。
    image.png
    2)在 optimization.splitChunks 中添加如下 cacheGroups 参数,实现缓存
    image.png
    npm run build,然后查看新的 vendor bundle:
    main 文件体积减少到 240 bytes ,并且 main 文件不再含有来自 node_modules 目录的 vendor 代码。
    image.png
    image.png