真香 - Webpack5 新特性之增量编译

2022-12-13 283

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： webpack作为最使用最广泛的前端打包工具，已经成为前端工程化基础设施的一部分。webpack5正式发布于2020年10月10号，距离上一个大版本Webpack4更新已经是2年前年了，每个大版本的升级都会有相当多的改变和提升，今天咱们就来看看增量编辑和长期缓存。

webpack作为最使用最广泛的前端打包工具，已经成为前端工程化基础设施的一部分。

webpack5正式发布于2020年10月10号，距离上一个大版本Webpack4更新已经是2年前年了，每个大版本的升级都会有相当多的改变和提升，今天咱们就来看看增量编辑和长期缓存。

增量编译（官方称作:优化持久化缓存)

Webpack5之前在构建时，会以配置的 entry 为入口，递归解析模块依赖，构建出一个依赖图（graph），该依赖图记录代码中各个 module 之间的关系。

ps: graph 是什么？图是一种数据结构，类似下面这样

ba2d6abdfa4603fc8dae6b00188ec788_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

每当有文件内容更新的时候,会重新递归生成依赖图，如果简单粗暴地重建依赖图再编译，会有很大的性能开销。在webpack5中，利用缓存实现增量编译，从而提升构建性能。每当代码变化、模块之间依赖关系改变导致依赖图改变时， Webpack 会读取记录做增量编译。

缓存（内存 / 磁盘两种形式）中的主要内容是 module objects，在编译的时候会将依赖图以二进制或者 json 文件存储在硬盘上。

之前持久缓存的方式

使用 cache-loader 可以将编译结果写入硬盘缓存，Webpack 再次构建时如果文件没有发生变化则会直接拉取缓存。
还有一部分 loader 自带缓存配置，比如 babel-loader，可以配置参数 cacheDirectory 使用缓存，将每次的编译结果写进磁盘（默认在 node_modules/.cache/babel-loader 目录）
terser-webpack-plugin 开启缓存

webpack5持久缓存方式

v5 中缓存默认是 memory，你可以修改设置写入硬盘：

module.export={
    cache{
       type:'filesystem',  //  'memory' | 'filesystem'
        cacheDirectory: 'node_modules/.cache/webpack', // 默认将缓存存储在 node_modules/.cache/webpack
        // 缓存依赖，当缓存依赖修改时，缓存失效
        buildDependencies:{
         // 将你的配置添加依赖，更改配置时，使得缓存失效
         config: [__filename]
     } 
    }
}

增量编译体验

下面来尝试下这个功能，并同时和webpack4做下对比

7b7e9a627c6c07e25d7c25772d0a51d9_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

为了能够看出对比效果，搞了一堆模块，不过代码量都很少。

配置环境 - webpack4 安装

下面使用yarn 安装，本人习惯用yarn，因为速度够快

// webpack4
 yarn add webpack@4 webpack-cli@3 babel-loader @babel/core  @babel/preset-env -D

const path=require('path'); 
module.exports={
    mode:"development",
    entry:{
        index:'./src/pages/home/index.js' //入口文件
    },
    output:{
        filename:'[name].js', 
        path:path.resolve(__dirname,'./dist') //指定生成的文件目录
    },
    // 模块
   module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:[
          {
            loader:'babel-loader',
            options:{
              presets:[
                '@babel/preset-env',
              ]
            },
          }
        ]
      },
    ]
  },
}

配置环境 - webpack5 安装

// webpack5
 yarn add webpack webpack-cli babel-loader @babel/core  @babel/preset-env -D

const path=require('path'); 、
module.exports={
    mode:"development", 、
    entry:{
        index:'./src/pages/home/index.js' 、
    },
    output:{
        filename:'[name].js',、
        path:path.resolve(__dirname,'./dist')、
    },
    cache: {
        type: 'filesystem',//使用文件缓存
        // cacheDirectory 默认路径是 node_modules/.cache/webpack
        cacheDirectory: path.resolve(__dirname, './temp_cache') //本地目录
      },
    // 模块
   module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:[
          {
            loader:'babel-loader',
            options:{
              presets:[
                '@babel/preset-env',
              ]
            },
          }
        ]
      },
    ]
  },
}

配置启动命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config webpack.config.js"
  },

构建结果对比

//执行
yarn start

首次编译 v5  done in 1.5s 左右  
首次编译 v4  done in 1.05s左    
后续无修改编译：v5 done in 0.6s 左右  
后续无修改编译：v4 done in 0.9s 左右
修改后编译：v5 done in 1.5s 左右  
修改后编译：v4 done in 1.5s 左右  
但v5里多了一个时间 webpack compiled successfully time，这个在v4里默认没有显示
V5 首次编译   webpack compiled successfully in 723 ms
V5 无修改编译 webpack compiled successfully in 100 ms
V5 修改后编译 webpack compiled successfully in 417 ms
但我们应该以 done in time 作为对比