性能优化-缓存

缓存

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

目录结构

性能优化-缓存

 

 

 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
            }
          }
        ]
      }

 

 

上一篇:环境变量env的使用


下一篇:编写BIOS下的OS Loader的误区