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

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

創(chuàng)新互聯(lián)專注于嘉黎網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供嘉黎營銷型網(wǎng)站建設(shè)，嘉黎網(wǎng)站制作、嘉黎網(wǎng)頁設(shè)計、嘉黎網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造嘉黎網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供嘉黎網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

在webpack 4中：

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

在webpack 5中

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

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

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

更好的hash算法

這里指的就是訪問web頁面時的瀏覽器緩存，我們也知道，之前有 hash chunckhash contenthash 在 webpack 5中，把hash改成了fullhash。

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

hash/fullhash

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

chunckhash

chunckhash顧名思義是根據(jù)打包過程中當前 chunck 計算出來的 hash 值。

contenthash

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

•  當然，這么看好像，看不出啥問題，不就是把一個 hash 改成 fullhash 而已嘛？dang dang dang 然不是，我們就來扒扒看，直接上實戰(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對于添加注釋和修改變量其實，是會影響它的一個contenthash值的計算，如果是webpack 5的話，就不會影響。

Tree Shaking 的改進

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

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

我們來建立一個三個文件，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，而沒有使用 name
console.log(common.data.age);

webpack 4打包結(jié)果

但是我們打包出來的結(jié)果，卻是連 name 也打包進去。

webpack 5打包結(jié)果

簡直完美秒殺。

總結(jié)

•  當然，在webpack 4中，Tree Shaking 對嵌套的導出模塊未使用代碼無法很好進行 Tree Shaking，當然我們也可以借助一些plugin來實現(xiàn)，但是到了webpack 5得到了很大的改進。

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

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

容器項目

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

// 在html引入

// 這里是它的代碼
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
const Button = React.lazy(() => import('RemoteComponent/Button'));
function App() {
  function onClick() {
    console.log('這里是遠程組件觸發(fā)的');
  }
  return (
    

      
這里是測試模塊聯(lián)邦的項目

      
        
      
    

  );
}

遠程組件項目

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

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

實際效果

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

Asset Modules

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

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

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

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

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

結(jié)束

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

分享文章：我所知道的webpack5那些不太一樣的改變
標題鏈接：http://www.5511xx.com/article/ccdhgph.html