webpack 缓存-09

使用 webpack 打包会生成 dist 文件夹，把 dist 文件夹的内容部署到服务器上，通常浏览器可以访问服务器上的网站和资源，最后一步获取资源是比较费时间的，所以浏览器会使用一个叫“缓存”的技术，可以通过命中缓存以降低网络流量，使网站速度加载更快。在部署新版本的时候，不更改资源文件名，浏览器会默认没有缓存，这时候会使用它的缓存版本，由于缓存的额存在，获取新的代码的时候有些棘手，可以通过一些设置来确保 webpack 编译生成的文件能够被客户端缓存，在文件内容发生变化的时候，又能够请求到新的文件

9.1输出文件的文件名

更改 webpack 配置

// 出口文件
output: {
    // 指定输出文件的文件名
    filename: '[name].[contenthash].js'
}

9.2 缓存第三方库

将第三方库(library)（例如 lodash）提取到单独的 vendor chunk文件中，是比较推荐的方法，这是因为，他们很少像本地的源代码那样频繁的修改。因此通过实现以上步骤，利用 client 的长效缓存机制，命中缓存来消除请求，从而减少向 server 获取资源，同时还能保证 client 代码和 server 代码版本一致。（把第三方的代码像lodash，单独打包缓存到浏览器里，只有我们自己的代码发生变化的时候，可以去更新，但是第三方的代码始终可以使用浏览器缓存的内容，需要对第三方的代码做一个缓存）

更改 webpack 配置：

// 优化配置
optimization: {
    // 加载静态资源模块
    splitChunks: {
        // 缓存组
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
            }
        }
    }
}

9.3 将 js 文件放到一个文件夹中

目前全部 js 文件都在 dist 文件夹目录下，尝试把它放到一个文件夹中

修改 webpack 配置：

// 出口文件
output: {
    // 指定输出文件的文件名
    filename: 'scripts/[name].[contenthash].js'
}

此时dist文件夹内生成了个 scripts 文件夹，里面存放的是所有 js 文件