【前端必會】HtmlWebpackPlugin 和 SplitChunksPlugin 是什麼?

来源:https://www.cnblogs.com/lee35/archive/2022/09/25/16729376.html
-Advertisement-
Play Games

==面試題 ##1.vue2中的響應式原理簡述 響應式原理主要就是通過數據劫持,依賴收集,派發更新的方式來實現的 1.數據劫持,vue2是通過Object.defineProperty方法的get、set來將對對象進行遞歸劫持。 其中修改對象的屬性時 就會觸發set, 使用對象的屬性時就會觸發get ...


背景

瞭解什麼是webpack插件,在來看一下不能不知道的兩個插件

  1. HtmlWebpackPlugin 有了這個插件,webpack執行後會自動幫我們在dist目錄生成一個html文件,並且添加bundle.js的引用。
    https://webpack.docschina.org/plugins/html-webpack-plugin
  2. SplitChunksPlugin 這個插件可以協助我們在生成的bundle上進行更為精確的配置,比如node_modules下的模塊單獨打包到一個文件(方便緩存)等

開始

寫2個按鈕,點擊分別載入頁面1,頁面2

//index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Webpack App</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
  </head>
  <body>
    <h1>Hello webpack splitchunks</h1>
    <button id="btn1">頁面1</button>
    <button id="btn2">頁面2</button>
  </body>
</html>

//入口腳本
window.addEventListener("load", function () {
  var btn1 = document.getElementById("btn1");
  btn1.addEventListener("click", function () {
    import("./p1");
  });

  var btn2 = document.getElementById("btn2");
  btn2.addEventListener("click", function () {
    import("./p2");
  });
});

兩個頁面

//頁面1
import { max } from "lodash";
console.log("p1 lodash", max);
//頁面2
import { max } from "lodash";
console.log("p2 lodash", max);
//webpack 配置
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const config = {
  context: path.resolve(__dirname),
  mode: "production",
  optimization: {
    minimize: false,
  },
  entry: "./main.js",
  target: ["web", "es5"],
  output: {
    clean: true,
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),
  ],
};

const compiler = webpack(config);
compiler.run((err, stats) => {
  console.log(err);
});

生成後的目錄

//bundle.js 關鍵代碼
var __webpack_exports__ = {};
console.log("hello");
window.addEventListener("load", function () {
  var btn1 = document.getElementById("btn1");
  btn1.addEventListener("click", function () {
    Promise.all(/* import() */[__webpack_require__.e(891), __webpack_require__.e(751)]).then(__webpack_require__.bind(__webpack_require__, 751));
  });

  var btn2 = document.getElementById("btn2");
  btn2.addEventListener("click", function () {
    Promise.all(/* import() */[__webpack_require__.e(891), __webpack_require__.e(291)]).then(__webpack_require__.bind(__webpack_require__, 291));
  });
});
//751.bundle.js 關鍵代碼
"use strict";
(self["webpackChunk"] = self["webpackChunk"] || []).push([[751],{

/***/ 751:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(891);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);

console.log("p1 lodash", lodash__WEBPACK_IMPORTED_MODULE_0__.max);

/***/ })

}]);
//291.bundle.js 關鍵代碼
"use strict";
(self["webpackChunk"] = self["webpackChunk"] || []).push([[291],{

/***/ 291:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(891);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);

console.log("p2 lodash", lodash__WEBPACK_IMPORTED_MODULE_0__.max);

/***/ })

}]);
//891.bundle.js 關鍵代碼(lodash模塊代碼)
(self["webpackChunk"] = self["webpackChunk"] || []).push([[891],{

/***/ 891:
/***/ (function(module, exports, __webpack_require__) {

/* module decorator */ module = __webpack_require__.nmd(module);
var __WEBPACK_AMD_DEFINE_RESULT__;/**
 * @license
 * Lodash <https://lodash.com/>
 * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
 * Released under MIT license <https://lodash.com/license>
 * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
 * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
 */
;(function() {

  /** Used as a safe reference for `undefined` in pre-ES5 environments. */
  var undefined;

  /** Used as the semantic version number. */
  var VERSION = '4.17.21';

  /** Used as the size to enable large array optimizations. */
  var LARGE_ARRAY_SIZE = 200;
......

總結

  1. 使用了非同步載入模塊,自動生成2個bundle(751、251)。非同步模塊好像一定是會拆分為一個新的文件(不確定)
  2. 2個模塊都引用了lodash,所以lodash又單獨拆出一個bundle(891)
  3. 進入頁面載入
  4. 點擊按鈕1
  5. 點擊按鈕2
  6. 多看文檔、多看文檔、多看文檔
    https://webpack.docschina.org/plugins/split-chunks-plugin/

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 數據表的基本操作. MySQL 資料庫支持多種數據類型,大致可以分為 3 類:數值類型、日期和時間類型、字元串(字元)類型。 (1)數值類型 數值類型用於存儲數字型數據,這些類型包括整數類型(TINYINT、SMALLINT、MEDIUMINT、INT、BIGINT),浮點數類型(FLOAT、DOU ...
  • 使用Mysql的zip壓縮包解壓版,下載之後需進行一定的配置,才能使用它。 下麵對Mysql壓縮包版的安裝方法進行詳細的描述,如有疑問或錯誤,望及時反饋。 首先,mysql的官方下載地址點我進行下載 1. 根據你要下載的電腦相應版本,點擊Download跳轉到下載界面。 2. 之後你會看到讓你登陸或 ...
  • 主從複製 + 分庫分表 要講主從複製,首先來看看MySQL自帶的日誌文件。 日誌 錯誤日誌 錯誤日誌是 MySQL 中最重要的日誌之一,它記錄了當 mysqld 啟動和停止時,以及伺服器在運行過程中發生任何嚴重錯誤時的相關信息。當資料庫出現任何故障導致無法正常使用時,建議首先查看此日誌文件。 該日誌 ...
  • 聽不見、聽不清、聽不懂,這是全國上千萬聽障群體的真實寫照。由於聽力的局限,他們在求學、工作、就醫、出行等方面都面臨巨大挑戰。AI時代,全行業為信息無障礙建設形成強大合力,但聽障群體依然面臨著冷冰冰的現實:專業語言服務人員的稀缺、溝通輔助器具的不完備,甚至來自社會的偏見及誤解…… “聾人只要通過助聽設 ...
  • 如果有一天,周遭的世界突然變得很安靜,動聽美妙的音樂,在你看來只是沉寂;振奮人心的演講,對你而言只是默劇;大自然的千里鶯啼,於你來說也只是畫捲。你會不會感到害怕? 而有這麼一群人,每天都在與這世界無聲交流著,他們就是聽力障礙人士。據2006年第二次全國殘疾人抽樣調查顯示,我國的聽力殘疾人約2780萬 ...
  • 最基礎的指針如下: int a; int* p = &a; 答:p指向a的地址,&是取a的地址。*指的是指針中取內容的符號。 2.str[]和str*的區別: char str1[] = "abc"; char str2[] = "abc"; const char str3[] = "abc"; c ...
  • Array 對象 所有方法 concat() 方法 合併多個數組,返回一個新數組 join() 方法 將數組合併為字元串,用指定的字元分割 pop() 方法 刪除成員(從後) 並返回該被刪除的元素 shift() 方法 刪除成員(從前) 並返回該被刪除的元素 splice() 方法 刪除多個元素 並 ...
  • react腳手架創建幾種方式 node v16.17.0 npm 8.15.0 yarn 3.2.3 vite 3.1.3 配置less-loader npm 首先通過 npm 方式全局安裝 create-react-app npm install -g create-react-app 查看是否安 ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...