webpack 學習筆記

標籤：java   web   ret   load   適配   bpa   耦合   大型   url   

1. 背景

       前端已經從簡單的頁面展示逐漸向著大型的前端應用發展，自然前端應用的代碼量以及各種資源都在不斷地增加。如何解決瀏覽器快速顯示，實現非同步資源載入成為了一個要解決的問題。其次，隨著前端代碼量的增加，如何?模組化開發或者多人寫作並發開發，成為另外一個問題。當然，模組化開發才能實現模組化載入，如何整個前端代碼都耦合在一起，很難實現非同步載入。

2. 解決方案

      以下只涉及少量主流方案

     1.Requirejs

 1 //通過define實現模組的定義 2 define([dependences],function(depModuls){ 3      return Module; 4 }); 5  6 //通過require來引進模組 7 require([dependences],function(depModules){}); 8  9 //懶載入路由模組10 var component = function(resolve){11     require(‘url‘,resolve);  12 };13 14 //其他的按需載入15 require([],function(){16    if(ture){17     require([],function(){})18    } 19 });

    2.ES6 模組

    <1> 盡量靜態化，使得編譯時間就能確定模組的依賴關係，以及輸入輸出的變數

    <2>原生的瀏覽器沒有實現該標準，新版的Dode.js才支援

期待的解決方案：不僅是JavaScript代碼，還有css，圖片，字型等資源也需要模組化。

3. webpack要解決的的問題

    <1>分塊傳輸：按需進行懶載入，在實際應用中用到某些模組的時候在增量載入。

    要實現模組的按需載入，就需要一個對整個程式碼程式庫中的模組進行靜態分析，編譯打包的過程。

    <2>JavaScript，Css，圖片，HTML模板以不同的形式存在，如coffeeScript，Less，Sass,以及各種HTML模板。

    <3>讓require能載入各種資源，分析出各個模組的類型和依賴關係，將不同類型的模組提交給適配的載入器來處理，還需要一個模組載入的相容策略。

4.Webpack 介紹

    webpack是一個模組打包器，它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則產生對應的靜態資源。

    產生需求，現在的模組管理和打包工具並不適合大型的項目，尤其是單頁面web應用程式。如何在一個大規模的應用中，維護各種代碼的分割和存放，維護它們之間的依賴關係，並且無縫地將它們整合到一起產生適合瀏覽器端請求載入的靜態資源。

   <1>將依賴拆分為按需載入的塊

   <2>初始化載入的耗時盡量少

   <3>各種靜態資源都可以視為模組

   <4>將第三方庫整合成模組的能力

    <5>可以自訂打包邏輯的能力

    <6>適合大項目，無論是單頁還是多頁的web應用。

   一、代碼拆分

   webpack 有兩種組織模組依賴的方式，同步和非同步。非同步載入作為分割點，形成一個新的塊。在最佳化了依賴數後，每一個作為一個檔案被打包。

   二、Loader

  webpack本身只能處理原生的javascript模組，但是Loader轉換器可以將各種類型的資源轉換成JavaScript模組。

  三、智能解析

  webpack有一個智能解析器，幾乎可以處理任何第三方庫。

 四、外掛程式系統

 五、快速運行

 webpack使用非同步 I/O 和多級緩衝提高運行效率，使得webpack快速增量編譯。

待續。。。。 

   

webpack 學習筆記