【Webpack 性能优化系列(4) - 缓存】详解如何做bable缓存和文件资源缓存

深碍√TFBOYSˉ_ 2022-09-09 10:58 112阅读 0赞

**webpack系列文章：**

*  [【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！][Webpack _9_ -]
 *  [【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验][Webpack _8_ - PWA]
 *  [【Webpack 性能优化系列(7) - 懒加载和预加载】][Webpack _7_ -]
 *  [【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载][Webpack _6_ - code splitting _ bundle]
 *  [【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！][Webpack _5_ - tree shaking]
 *  [【Webpack 性能优化系列(3) - oneOf】][Webpack _3_ - oneOf]
 *  [【Webpack 性能优化系列(2) - source-map】][Webpack _2_ - source-map]
 *  [【Webpack 性能优化系列(1) - HMR 热模块替换】][Webpack _1_ - HMR]
 *  [【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！][Webpack _css_css_html_js_js_eslint_js_babel]
 *  [【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？][Webpack _html_devServer]
 *  [【Webpack 简介及五个核心概念】][Webpack]

# 缓存 #

**缓存我们会从两个点出发：一个是对bable进行缓存，另一个是对整体的文件资源进行缓存**

# bable缓存 #

**日常开发中，我们永远是js代码最多，像结构和样式要么少要么很少，即使多也没有办法做更多的处理。**

**为什么要对bable进行缓存呢？因为bable要对我们写的js代码做编译处理，编译成一种浏览器能识别的语法，即所谓的js兼容性处理。在编译过程中，假设有100个js模块，只改动其中1个js模块，不可能把全部的模块都重新编译一遍，其他99个应该是不变的，这一点跟前面文章讲过的HMR功能一样：一个模块变，只变这一个模块，其他模块不变。而生产环境下又不能使用HMR功能，因为HMR是基于devServer，生产环境是不需要devServer的。**

**开启bable缓存只需要在`bable-loader`的配置里加一个参数即可：`cacheDirectory: true`**

{ 
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       options: { 
         presets: [
           [
             '@babel/preset-env',
             { 
               useBuiltIns: 'usage',
               corejs: {  version: 3 },
               targets: { 
                 chrome: '60',
                 firefox: '50'
               }
             }
           ]
         ],
         // 开启babel缓存
         // 第二次构建时，会读取之前的缓存
         cacheDirectory: true
       }
     },

**开启bable缓存，之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)。**

# 文件资源缓存 #

写个例子来演示一下文件资源缓存

为了演示缓存，我们需要写一个服务器代码

`server.js:`

/* 服务器代码 启动服务器指令： npm i nodemon -g nodemon server.js 不需要下载nodemon node server.js 访问服务器地址： http://localhost:3000 */
    const express = require('express');
    
    const app = express();
    // express.static向外暴露静态资源
    // maxAge 资源缓存的最大时间，单位ms
    app.use(express.static('build', {  maxAge: 1000 * 3600 }));
    
    app.listen(3000);

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16]  
关于上述服务器代码疑问参考：[Express细节探究(1)——app.use(express.static) - ADAM亚当 - 博客园][Express_1_app.use_express.static_ - ADAM_ -]

`node server.js`命令， 启动服务器

**注意，上面的服务器设置了`maxAge`，即开启Cache-Control**

通过network查看资源，刷新页面，可以看到资源来自cache，即来自缓存  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
**查看请求可以发现请求头设置了Cache-Control，`max-age=3600`，即有效期为3600s，一个小时，意思就是这个资源会被强制缓存一个小时**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
这个缓存会带来新的问题：

假如我们修改代码，修改一下js代码

`index.js`:

import '../css/index.css';
    
    function sum(...args) { 
      return args.reduce((p, c) => p + c, 0);
    }
    
    // eslint-disable-next-line
    // console.log(sum(1, 2, 3, 4));// 修改前
    
    // eslint-disable-next-line
    console.log(sum(1, 2, 3, 4, 5));// 修改后

再次构建，打开浏览器刷新，会发现结果没有变化  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
修改`background-color: deeppink;`，原来为`pink`，再次构建，发现样式同样的有没有变化  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
这是为什么呢？

**这是因为当前资源在强制缓存期间，它是不会访问服务器的，直接读取本地缓存**

**这就带来了一个问题，假使我们的资源在强缓存期间出现了严重的bug，开发人员需要紧急修复，但因为资源被强制缓存，就算修复了，也会因为还在强缓存期间而无效。**

**我们可以通过修改资源名称来解决这个问题**

有三种方法可以修改资源名称：

**hash: 每次wepack构建时会生成一个唯一的hash值。**

问题: 因为js和css同时使用一个hash值。

如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）

**chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样**

问题: js和css的hash值还是一样的

因为css是在js中被引入的，所以同属于一个chunk

**contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样**

**这三种方法，可以发现只有`contenthash`是没有副作用的，所以最后的结论就是使用`contenthash`来修改资源名称**

使用方式：

入口文件

entry: './src/js/index.js',
     output: { 
       filename: 'js/built.[contenthash:10].js',
       path: resolve(__dirname, 'build')
     },

样式文件

new MiniCssExtractPlugin({ 
       filename: 'css/built.[contenthash:10].css'
     }),

完整的配置：

const {  resolve } = require('path');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    /* 缓存： babel缓存 cacheDirectory: true --> 让第二次打包构建速度更快 文件资源缓存 hash: 每次wepack构建时会生成一个唯一的hash值。 问题: 因为js和css同时使用一个hash值。 如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件） chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样 问题: js和css的hash值还是一样的 因为css是在js中被引入的，所以同属于一个chunk contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样 --> 让代码上线运行缓存更好使用 */
    
    // 定义nodejs环境变量：决定使用browserslist的哪个环境
    process.env.NODE_ENV = 'production';
    
    // 复用loader
    const commonCssLoader = [
      MiniCssExtractPlugin.loader,
      'css-loader',
      { 
        // 还需要在package.json中定义browserslist
        loader: 'postcss-loader',
        options: { 
          ident: 'postcss',
          plugins: () => [require('postcss-preset-env')()]
        }
      }
    ];
    
    module.exports = { 
      entry: './src/js/index.js',
      output: { 
        filename: 'js/built.[contenthash:10].js',
        path: resolve(__dirname, 'build')
      },
      module: { 
        rules: [
          { 
            // 在package.json中eslintConfig --> airbnb
            test: /\.js$/,
            exclude: /node_modules/,
            // 优先执行
            enforce: 'pre',
            loader: 'eslint-loader',
            options: { 
              fix: true
            }
          },
          { 
            // 以下loader只会匹配一个
            // 注意：不能有两个配置处理同一种类型文件
            oneOf: [
              { 
                test: /\.css$/,
                use: [...commonCssLoader]
              },
              { 
                test: /\.less$/,
                use: [...commonCssLoader, 'less-loader']
              },
              /* 正常来讲，一个文件只能被一个loader处理。 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序： 先执行eslint 在执行babel */
              { 
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: { 
                  presets: [
                    [
                      '@babel/preset-env',
                      { 
                        useBuiltIns: 'usage',
                        corejs: {  version: 3 },
                        targets: { 
                          chrome: '60',
                          firefox: '50'
                        }
                      }
                    ]
                  ],
                  // 开启babel缓存
                  // 第二次构建时，会读取之前的缓存
                  cacheDirectory: true
                }
              },
              { 
                test: /\.(jpg|png|gif)/,
                loader: 'url-loader',
                options: { 
                  limit: 8 * 1024,
                  name: '[hash:10].[ext]',
                  outputPath: 'imgs',
                  esModule: false
                }
              },
              { 
                test: /\.html$/,
                loader: 'html-loader'
              },
              { 
                exclude: /\.(js|css|less|html|jpg|png|gif)/,
                loader: 'file-loader',
                options: { 
                  outputPath: 'media'
                }
              }
            ]
          }
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({ 
          filename: 'css/built.[contenthash:10].css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new HtmlWebpackPlugin({ 
          template: './src/index.html',
          minify: { 
            collapseWhitespace: true,
            removeComments: true
          }
        })
      ],
      mode: 'production',
      devtool: 'source-map'
    };

# 参考 #

*  https://www.bilibili.com/video/BV1e7411j7T5?p=7&spm\_id\_from=pageDriver

[Webpack _9_ -]: https://blog.csdn.net/weixin_45844049/article/details/120065367
[Webpack _8_ - PWA]: https://blog.csdn.net/weixin_45844049/article/details/120063411
[Webpack _7_ -]: https://blog.csdn.net/weixin_45844049/article/details/120048999
[Webpack _6_ - code splitting _ bundle]: https://blog.csdn.net/weixin_45844049/article/details/120044485
[Webpack _5_ - tree shaking]: https://blog.csdn.net/weixin_45844049/article/details/120043245
[Webpack _3_ - oneOf]: https://blog.csdn.net/weixin_45844049/article/details/120008581
[Webpack _2_ - source-map]: https://blog.csdn.net/weixin_45844049/article/details/120002385
[Webpack _1_ - HMR]: https://blog.csdn.net/weixin_45844049/article/details/119982759
[Webpack _css_css_html_js_js_eslint_js_babel]: https://blog.csdn.net/weixin_45844049/article/details/119828504
[Webpack _html_devServer]: https://blog.csdn.net/weixin_45844049/article/details/119718436
[Webpack]: https://blog.csdn.net/weixin_45844049/article/details/119452096
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d1b7a01ced7d47bb97101e1e0f2b9b3f.png
[Express_1_app.use_express.static_ - ADAM_ -]: https://www.cnblogs.com/A-dam/p/5053299.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/c21064329d764304b1743ce18e264ee4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/d04fc41e0f5d45ea82b6bcbaa6f26c1a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/af5a2e224aad47c1931c69f9a5741a5d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/c89d2908ae9949939bc66733492b57a6.png