【前端必會】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
  • C#.Net的BCL提供了豐富的類型,最基礎的是值類型、引用類型,而他們的共同(隱私)祖先是 System.Object(萬物之源),所以任何類型都可以轉換為Object。 ...
  • 最近有群友咨詢C#如何調用Python?小編嘗試Python.NET過程中遭遇的版本相容性和環境配置難題,小編決定尋找一個更為簡單、穩定且對初學者友好的解決方案。小編搜索一番,除了Python.NET之外,還有其他途徑能夠幫助我們輕鬆地在C#項目調用Python腳本,那就是通過命令行調用,使用 Sy ...
  • .NET中特性+反射 實現數據校驗 在.NET中,我們可以使用特性+反射來實現數據校驗。特性是一種用於為程式中的代碼添加元數據的機制。元數據是與程式中的代碼相關聯的數據,但不直接成為代碼的一部分。通過特性,我們可以為類、方法、屬性等添加額外的信息,這些信息可以在運行時通過反射獲取和使用。 對反射不太 ...
  • Biwen.Settings 是一個簡易的配置項管理模塊,主要的作用就是可以校驗並持久化配置項,比如將自己的配置存儲到資料庫中,JSON文件中等 使用上也是很簡單,只需要在服務中註入配置, 比如我們有一個GithubSetting的配置項,我們只需要定義好對象然後註入到Service中即可: [De ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 前言 VB.NET,全名Visual Basic .NET,是Microsoft .NET框架的一部分,是一種面向對象的編程語言。它繼承了Visual Basic的易用性,同時增加了對面向對象編程的支持。VB.NET提供了大量的內置函數,使得開發者可以更容易地處理字元串、數學計算、文件和目錄訪問等任 ...
  • 自定義可移動點二維坐標軸控制項 目錄 路由參數 坐標軸控制項定義 Demo 路由參數 X_YResultCollection為當前X軸對應Y軸值存儲字典 public class ResultCollectionChangedEventArgs(RoutedEvent routedEvent, obje ...
  • 自定義分頁控制項 tip: 該控制項的樣式用的是materialDesign庫,需要下載Nuget包 Code Xaml <UserControl x:Class="TestTool.CustomControls.PagingControl" xmlns="http://schemas.microsof ...
  • 最近群里有個小伙伴把Dapper遷移SqlSugar幾個不能解決的問題進行一個彙總,我正好寫一篇文章來講解一下 一、sql where in傳參問題: SELECT * FROM users where id IN @ids 答: SqlSugar中應該是 var sql="SELECT * FRO ...
  • 安裝nuget包 Wesky.Net.OpenTools 1.0.8或以上版本。支持.net framework 4.6以上版本,以及所有.net core以及以上版本引用。 開發一個簡單的Winform界面,用來測試使用。如需該winform的demo,可以在公眾號【Dotnet Dancer】後 ...