持久性緩存來(lái)提高構(gòu)建性能

在webpack 5之前，webpack是沒(méi)有提供持久化緩存，我們開(kāi)發(fā)的時(shí)候需要使用類(lèi)似 cache-loader 來(lái)做緩存方面的處理

在webpack 4中：

module.exports = {
  module: {
    rules: [
      {
        test: /.ext$/,
        use: ['cache-loader', ...loaders],
        include: path.resolve('src'),
      },
    ],
  },
};

在webpack 5中

在webpack 5中自身也加入了持久化緩存，緩存生成的 webpack 模塊和 chunk，來(lái)改善構(gòu)建速度。cache 會(huì)在開(kāi)發(fā) 模式被設(shè)置成 type: 'memory' 而且在 生產(chǎn) 模式 中被禁用。

module.exports = {
  cache: {
    type: 'filesystem',
  },
};

•  cache.type 有兩個(gè)值 memory ｜ filesystemmemory表示會(huì)將打包生成的資源存放于內(nèi)存中。filesystem表示開(kāi)啟了文件系統(tǒng)緩存。

更好的hash算法

這里指的就是訪(fǎng)問(wèn)web頁(yè)面時(shí)的瀏覽器緩存，我們也知道，之前有 hash chunckhash contenthash 在 webpack 5中，把hash改成了fullhash。

首先，我們介紹一下這幾個(gè)hash值有什么不一樣。

hash/fullhash

hash/fullhash 是根據(jù)打包中的所有文件計(jì)算出來(lái)的 hash 值，在一次打包中，所有的資源出口文件的filename獲得的[hash]都是一樣的。

chunckhash

chunckhash顧名思義是根據(jù)打包過(guò)程中當(dāng)前 chunck 計(jì)算出來(lái)的 hash 值。

contenthash

contenthash顧名思義是根據(jù)打包時(shí)的內(nèi)容計(jì)算出的 hash 值。

•  當(dāng)然，這么看好像，看不出啥問(wèn)題，不就是把一個(gè) hash 改成 fullhash 而已嘛？dang dang dang 然不是，我們就來(lái)扒扒看，直接上實(shí)戰(zhàn)，喵喵有啥不一樣。

我們先設(shè)定webpack的設(shè)置如下：

const path = require('path');
module.exports = {
  mode: 'production',
  entry: {
    index: './index.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[contenthash].js',
  },
}

這里是要打包的 index.js 的內(nèi)容

const num = 1;
console.log('這里是輸出', num);

這是添加注釋和修改變量后的 index.js 的內(nèi)容

const str = 1;
//這里是輸出
console.log('這里是輸出', str);

webpack 4打包

我們可以看到這里的 hash 值為 e8510378c5f44d16af40 。

這里是添加注釋和修改變量后打包后的結(jié)果

我們可以看到這里的 hash 值為 2c719bba27df586bf8f2 。

webpack 5打包

我們可以看到這里的 hash 值為 d1bc13ae7e7dc828a64f 。

這里是添加注釋和修改變量后打包后的結(jié)果

我們可以看到這里的 hash 值為 d1bc13ae7e7dc828a64f 。

總結(jié)

•  我們可以明顯看出，webpack 4對(duì)于添加注釋和修改變量其實(shí)，是會(huì)影響它的一個(gè)contenthash值的計(jì)算，如果是webpack 5的話(huà)，就不會(huì)影響。

Tree Shaking 的改進(jìn)

•  tree shaking是一個(gè)術(shù)語(yǔ)，通常用于描述移除 JavaScript 上下文中的未引用代碼(dead-code)。它依賴(lài)于 ES2015 模塊語(yǔ)法的 靜態(tài)結(jié)構(gòu) 特性，例如 import 和 export。

既然webpack 4都有這個(gè)功能，那么隨著webpack 5的升級(jí)，又有什么不一樣的地方呢？

我們來(lái)建立一個(gè)三個(gè)文件，index.js、a.js、b.js

// a.js
const name = 'zhangSan';
const age = 18;
export { name, age };

// b.js
import * as data from './a';
export { data };
// index.js

import * as common from './b';
// 我們可以看到只是使用了 age，而沒(méi)有使用 name
console.log(common.data.age);

webpack 4打包結(jié)果

但是我們打包出來(lái)的結(jié)果，卻是連 name 也打包進(jìn)去。

webpack 5打包結(jié)果

簡(jiǎn)直完美秒殺。

總結(jié)

•  當(dāng)然，在webpack 4中，Tree Shaking 對(duì)嵌套的導(dǎo)出模塊未使用代碼無(wú)法很好進(jìn)行 Tree Shaking，當(dāng)然我們也可以借助一些plugin來(lái)實(shí)現(xiàn)，但是到了webpack 5得到了很大的改進(jìn)。

模塊聯(lián)邦（Module Federation）

•  Webpack5 模塊聯(lián)邦讓 Webpack 達(dá)到了線(xiàn)上 Runtime 的效果，讓代碼直接在項(xiàng)目間利用 CDN 直接共享，不再需要本地安裝 Npm 包、構(gòu)建再發(fā)布了！

容器項(xiàng)目

//這里是容器的webpack模塊聯(lián)邦設(shè)置【也就是在該組件使用】
new ModuleFederationPlugin({
  name: 'react1',
  library: { type: 'var', name: 'react1' },
  remotes: {
    RemoteComponent: 'RemoteComponent'
  },
}),

// 在html引入
<script src="http://localhost:3001/remoteEntry.js"></script>

// 這里是它的代碼
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
const Button = React.lazy(() => import('RemoteComponent/Button'));
function App() {
  function onClick() {
    console.log('這里是遠(yuǎn)程組件觸發(fā)的');
  }
  return (
    <div>
      <h1>這里是測(cè)試模塊聯(lián)邦的項(xiàng)目</h1>
      <React.Suspense fallback='努力加載中??...'>
        <Button onClick={onClick} content='content'></Button>
      </React.Suspense>
    </div>
  );
}

遠(yuǎn)程組件項(xiàng)目

// 提供遠(yuǎn)程組件的項(xiàng)目webpack模塊聯(lián)邦設(shè)置
new ModuleFederationPlugin({
  name: 'RemoteComponent',
  library: { type: 'var', name: 'RemoteComponent' },
  // 使用此遠(yuǎn)程組件加載的文件名稱(chēng)
  filename: 'remoteEntry.js',
  exposes: {
  //此處提供了一個(gè)Button組件
    './Button': './src/components/Button',
  },
}),

// 這是遠(yuǎn)程button組件
import React from 'react';
export default function Button({ content, onClick = () => {} }) {
  return (
    <button onClick={onClick}>{ content }</button>
  )
}

實(shí)際效果

我們可以看到，點(diǎn)擊按鈕，成功觸發(fā)onClick事件。

Asset Modules

•  Asset Modules 通常被翻譯為資源模塊，它指的是圖片和字體等這一類(lèi)型文件模塊，它們無(wú)須使用額外的預(yù)處理器，webpack 通過(guò)一些配置就可以完成對(duì)它們的解析。

在 webpack 5 之前，沒(méi)有內(nèi)置資源模塊，所以，我們通常使用，file-loader url-loader raw-loader之類(lèi)的loader去處理。

// 在webpack5中，可以直接使用內(nèi)置的資源模塊就行了
module.exports = {
// ...
  module: {
    rules: [{
      test: /\.jpg$/,
      type: 'asset/resource'
    }]
  }
}

// 在webpack 4就需要使用 file-loader 之類(lèi)的loader
module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }
    ]
  }
}

•  Asset Modules 它的值有四種，asset/resource（對(duì)應(yīng)file-loader）、asset/inline（對(duì)應(yīng)url-loader）、asset/source（對(duì)應(yīng)raw-loader）、asset。

結(jié)束

當(dāng)然，webpack 5的改變不止這些，比如，還有 不再為 Node.js 模塊自動(dòng)引用 polyfill、也內(nèi)置了terser進(jìn)行代碼壓縮......