webpack4.15.1 学习笔记(八) — 缓存(Caching)

目录

• 输出文件名(Output Filenames)
• 缓存第三方库
• 将 js 文件放到一个文件夹中

 

webpack 打包模块化后的应用程序，会生成一个可部署的 /dist目录，只要 /dist 目录中的内容部署到 server 上，client（通常是浏览器）就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为 缓存 的技术。
通过命中缓存，降低网络流量，使网站加载速度更快，然而，在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当需要获取新的代码时，就会显得很棘手。

通过必要的配置，以确保 webpack 打包生成的文件能够被客户端缓存，而在文件内容变化后，能够请求到新的文件。

输出文件名(Output Filenames)

通过使用 output.filename 进行文件名替换，来定义输出文件的名称，可以确保浏览器获取到修改后的文件。webpack 提供了一种可替换模板字符串的方式，通过带括号字符串来模板化文件名。[contenthash]将根据资产的内容创建唯一的哈希。当资产的内容发生变化时，[contenthash]也会发生变化。

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: {
       index: './src/index.js',
   },
   plugins: [
       new CleanWebpackPlugin({
           cleanStaleWebpackAssets: false
       }),
       new HtmlWebpackPlugin({
           title: 'Caching'
       }),
   ],
   output: {
       filename: '[name].[chunkhash].js',    // dist 目录下生成 index.8e7356e76ac80f537595.js 文件
       path: path.resolve(__dirname, 'dist')
   }
};

缓存第三方库

SplitChunksPlugin可用于将模块拆分为单独的包。webpack 提供了一种优化功能，optimization.runtimeChunk。

将第三方库如 lodash提取到单独的 vendor chunk 文件中，因为它们很少频繁修改。利用 client 的长效缓存命中来消减请求， 添加optimization.splitChunks.cacheGroups 参数并构建：

const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',  // dist 目录生成 vendors.c9b22484d40ed904be57.js
            chunks: 'all',
          }
        }
      }
   }
};

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

全部 js 文件都在 dist 根目录下，将js统一放到一个文件夹中：

module.exports = {
  output: {
    filename: 'js/[name].[contenthash].js',  // 在前面加上路径即可
  },
};