性能优化-缓存

缓存

缓存就是读取计算机内存中的文件，作用就是提高代码的性能。

目录结构

 

 

 index.js文件

import './index.css';
import {a} from "../src/js/a.js"

console.log(a,'a');

此时进行webpack打包

第一次请求服务器地址127.0.0.1:3000，此时向服务器发送请求

 

第二次请求服务器地址127.0.0.1:3000，此时读取的缓存文件

 

 

 此时我们设置修改index.css文件的背景颜色为蓝色

再次进行打包的时候页面的更新是失效的，还是粉色，因为此时会先去读取缓存中的文件，发现有index.css文件所以，不会再去向服务器发送请求，所以不会有代码更新

最粗暴的解决办法就是清除浏览器的缓存，这种不适用真正的应用场景

解决办法就是配置webpack输出文件的命名，可以配置hash值，因为hash值在每一次打包的时候都会生成一个不同且唯一的值（值本身的不同，不是文件的公用性），所以读取缓存中，一定不会和上次的文件名一样

plugins: [
  // html文件
  new HtmlWebpackPlugin({
    // 模板路径
    template: "./src/index.html",
    minify: {
      // 压缩空格
      collapseWhitespace: true,
      // 移除注释
      removeComments: true
    }
  }),
  new MiniCssExtractPlugin({
    filename: 'index.[hash:10].css'
  })
],

此时每一次打包css文件的时候都会产生一个新的带着hash值的文件

给index.js也设置了hash值

output: {
  // 出口文件
  filename: "index.[hash:10].js",
  // 出口路径
  path: resolve(__dirname, "build"),
},

发现打包之后js文件和css文件的hash值是相同的

这是因为在webpack打包的时候会产生一个唯一的hash值，所有的文件共用这个hash值

此时如果我们需要单独设置自己的hash值，可以设置chunkhash，chunkhash表示每一个chunk模块都是单独的hash值

此时我们index.js文件中异步引入b.js文件

import './index.css';
import {a} from "../src/js/a/js"
console.log(a)

import("../src/js/b.js").then((res) => {
  console.log(res)
})

因为异步引入会创建一个独立的chunk模块

我们还可以配置每一个文件自己单独的hash值，配置contenthash

我们以output的js文件举例

 output: {
    // 出口文件 n7um8
    filename: "index.[contenthash:10].js",
    // 出口路径
    path: resolve(__dirname, "build"),
  },
  

 

 

 

 除了文件可以读取缓存之外，babel-loader在编译的时候也可以进行缓存读取，因为babel-loader在运行的时候经常会创建一些冗余（多余的用不到）文件，此时我们可以配置cacheDirectory为true表示配置loader的缓存

 {
        // 识别.js结尾的文件
        test: /\.js$/,
        // 不需要识别/翻译node_modules文件夹内部的内容
        exclude: /node_modules/,
        // 使用的loader
        use: [
          {
            loader: 'babel-loader',
            // 指导babel-loader进行翻译的配置工具
            options: {
              presets: ['env'],// env 指的是ECMAScript New Version（ES的新版本）
               // 开启读取缓存模式
              cacheDirectory: true
            }
          }
        ]
      }