webpack效能最佳化-js教程-PHP中文網

首頁

web前端

js教程

webpack效能最佳化

小云云

Jan 04, 2018 pm 02:08 PM

webwebpack效能

Webpack效能最佳化的方式有很多種，本文之所以將 dll 單獨講解，是因為 dll 是一種最簡單粗暴且極為有效的最佳化方式。本文主要介紹了詳解webpack效能優化－DLL，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

在通常的打包過程中，你所引用的諸如：jquery、bootstrap、react、react-router、redux、antd、vue、vue-router、vuex 等等眾多庫也會被打包進bundle文件中。由於這些庫的內容基本上不會改變，每次打包加入它們無疑是一種巨大的效能浪費。

Dll 的技術就是在第一次時將所有引入的庫打包成一個dll.js 的文件，將自己編寫的內容打包為bundle.js 文件，這樣之後的打包只用處理bundle 部分。

以Vue 專案為例，先建立一個名為webpack.dll.config.js 的檔案

var path = require("path"),
　　fs = require(&#39;fs&#39;),
　　webpack = require("webpack");

var vendors = [
　　&#39;vue&#39;, 
　　&#39;vue-router&#39;, 
　　&#39;vuex&#39;
];

module.exports = {
　　entry: {
　　　　vendor: vendors
　　},
　　output: {
　　　　path: path.join(__dirname, "dist"),
　　　　filename: "Dll.js",
　　　　library: "[name]_[hash]"
　　},
　　plugins: [
　　　　new webpack.DllPlugin({
　　　　　　path: path.join(__dirname, "dist", "manifest.json"),
　　　　　　name: "[name]_[hash]",
　　　　　　context: __dirname
　　　　})
　　]
};

這個檔案的作用是將vue 、vue-router 以及vuex 合併打包為一個名為Dll.js 的靜態資源包，同時產生一個manifest.json 檔案方便對Dll.js 中的模組進行引用。

要注意的是，執行 webpack 指令是預設執行該目錄下名為 webpack.config.js 或 webpackfile.js 的檔案。所以需要透過 --config 指令手動指定該文件，最後加入 -p 指令將 Dll.js 壓縮。

$ webpack --config webpack.dll.config.js -p

這樣，在專案根目錄下就會多增加一個 dist 資料夾，其中有壓縮之後的 Dll.js 與 manifest.json 檔案。

manifest.json 檔案內容如下，給予各個模組 id 以便引用。

{
 "name": "vendor_2beb750db72b1cda4321",
 "content": {
  "./node_modules/process/browser.js": {
   "id": 0,
   "meta": {}
  },
  "./node_modules/vue-router/dist/vue-router.esm.js": {
   "id": 1,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
  "./node_modules/vue/dist/vue.runtime.esm.js": {
   "id": 2,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
//.......

最後在 webpack.config.js 中加入參考。在 plugins 屬性中新增 DllReferencePlugin 插件，並指明 manifest.json 檔案的參考路徑。

//...
plugins: [
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require(&#39;./dist/manifest.json&#39;)
  })
]

在確保成功執行 webpack.dll.config.js 檔案後，執行 webpack -p 進行專案打包。

可以看到打包在 Dll 檔案中的文件都被 delegated(委派) ，而不是直接打進 bundle 檔案。

這樣我們就將所有的資源完成打包，生成的dist 目錄如下：

#不過dist 資料夾要想作為一個完整的工程還少一個html 文件，我建立了一個名為pack.js 的文件，使用nodejs 的fileSystem 對html 檔案進行修改並拷貝。

pack.js

var fs = require(&#39;fs&#39;);

fs.readFile(&#39;./index.html&#39;, &#39;utf8&#39;, (err, data) => {
  if (!err) {
    var dataStr = data.toString(),
    timestamp = (new Date()).getTime();
  
    dataStr = dataStr
          .replace(&#39;bundle.js&#39;, &#39;bundle.js?v=&#39;+timestamp)
          .replace(&#39;<!-- dll -->&#39;, &#39;<script src="./dist/Dll.js?v=&#39;+ timestamp +&#39;"></script>&#39;);

    fs.writeFile(&#39;./dist/index.html&#39;, dataStr, (error) => {
      if (!error) {
        console.log(&#39;HTML file copy successfully&#39;);
      } else {
        console.log(error);
      }
    });
  } else {
    console.log(err);
  }
});

我們需要在模組的入口html 中加入的佔位字符，pack .js 的作用是將html 檔案拷貝一份到dist 目錄下，同時將替換為引用Dll.js 的script 標籤，並在引用檔案後加上時間戳記。

<!-- .... -->
<body>
<p id="demo" class="container"></p>

<!-- dll -->
<script src="./bundle.js"></script>
</body>
</html>

執行 webpack -p 打包後，輸入下方指令執行 pack.js，就會在 dist 目錄下產生 html 檔案。

$ node pack.js

內容如下：

<!-- .... -->
<body>
<p id="demo" class="container"></p>

<script src="./dist/Dll.js?v=1488250309725"></script>
<script src="./bundle.js?v=1488250309725"></script>
</body>
</html>

這樣dist 資料夾就作為一個完整的、不需要任何手動操作、已經壓縮混淆後的項目可以直接進行線上的部署。

實際項目範本參考位址如下。由於筆者作為 React 與 Vue 的雙持開發者，所以創建了兩個模板，以便之後透過 yomen(yo) 之類的進行腳手架工具化。

相關推薦：

vue、vuecli、webpack中使用mockjs模擬後端資料

##webpack3之loader解析

webpack配置在後端渲染詳解#

以上是webpack效能最佳化的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。