<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          parcel快速,零配置的打包工具,據說Parcel比webpack快多倍

          時間:?2017-12-14閱讀:?1181標簽:?Parcel

          Parcel的特性

          快速打包:Parcel 使用工作進程啟用多核編譯,并具有文件系統緩存,即使在重新啟動后也可快速重新構建。 

          打包所有資源:Parcel 支持JS,CSS,HTML,文件資源等等 - 不需要安裝任何插件。  

          自動轉換:在需要時,代碼使用 Babel,PostCSS 和 PostHTML 自動轉換 - 即使是 node_modules。 

          零配置代碼拆分:Parcel 使用動態 import() 語法拆分您的輸出包,所以只加載初始加載時所需的內容。 

          模塊熱替換:當你在開發過程中進行更改時,Parcel 會自動更新瀏覽器中的模塊,不需要進行任何配置。 

          友好的錯誤記錄:遇到錯誤時,Parcel 會以語法高亮的形式打印的代碼幀,以幫助你查明問題。


          速度比較

          基于一個合理大小的應用程序,包含1726個模塊,未壓縮有6.5M 。構建在2016年的MAcBook Pro,4核物理CPU。 

          打包工具   時間 
            browserify  22.98s
            webpack    20.71s
            parcel  9.98s
            parcel - with cache  2.64s 


          為什么需要Parcel?

          目前已經有很多的打包工具了,包括webpack和browserify。那么為什么我們還需要另外一個呢?主要原因是因為開發者的經驗。

          許多的打包工具都是圍繞著配置和插件構建的,而且為了讓應用正常的工作,超過500行的配置并不罕見。這些配置不僅繁瑣而且耗時。通常情況下,這可能導致次優化的應用發送到生產環境。parcel被設計成零配置的:只需要將它指向應用程序的入口點,它就能正常工作。

          目前現存的打包工具都非常慢。擁有大量文件和依賴的大型應用可能需要花費幾分鐘的時間來構建,這在開發過程中隨著時間的變化而變得尤為痛苦。監聽文件變更能夠幫助重新構建,但初始的啟動仍然非常慢。parcel利用工作線程編譯你的代碼,利用現代的多核處理器能力。這導致了初始構建的速度大大提升。它還具有一個文件系統緩存,可以保存每一個文件的編譯結果,以便后續能夠更快的啟動。

          最后,現有的打包工具都是圍繞字符串加載/轉換構建的,其中轉換需要一個字符串,解析它,進行一些轉換,然后再次生成代碼。通常這樣會導致許多的解析和代碼生成在單個文件上運行,這是非常低效的。相反,parcel的轉換工作在AST上,因此每個文件只有一個解析,多個轉換以及一個代碼生成。


          Parcel如何工作的?

          parcel將資源樹轉換為bundle樹。許多其它的打包工具基本上都是基于js資源,其它格式都是粘貼的-例如,默認情況下以字符串的形式內嵌到js中。parcel是文件類型無關的-它可以按照你期望的方式與任何類型的資源一起工作,無需配置。

          parcel將一個入口點作為輸入,可以是任何類型的:JS文件,HTML,CSS,圖片等。在parcel中定義了各種資源類型,它們知道如何處理特定的資源類型。資源文件被解析,它的依賴關系被提取,并轉換成最終的編譯形式。這創建了一個資源樹。

          一旦資源樹被構建,資源就被放入一個bundle樹中。為入口資源創建一個bundle,并為動態導入的資源創建子bundle,這回導致代碼拆分的發生。當導入不同類型的資源的時候就會創建子bundle,例如如果你在js中導入css文件,它就會打包成對應js的兄弟bundle。如果一個資源需要多個bundle,它會被打包到最近的共同祖先,因此它不會被包含多次。

          在構建bundle樹之后,每一個包都有特定的文件類型的包裝器寫入文件。

           

          Hello World

          從你的應用程序的入口 HTML 文件開始。Parcel 將從入口文件開始分析依賴關系來為你構建整個應用程序。 

          index.html

          <html>
          <body>
            <script src="./index.js"></script>
          </body>
          </html>

          index.js 

          // 導入另一個組件
          import main from './main';
          main();

          main.js

          // 導入一個 CSS module
          import classes from './main.css';
          export default () => {
            console.log(classes.main);
          };

          main.css 

          .main {
            /* 引用一個 image 文件 */
            background: url('./images/background.png');
            color: red;
          }

          只需運行parcel index.html 來啟動一個dev服務器。導入 JavaScript,CSS,images,和更多資源,即可輕松搞定!


          Parcel的安裝

          Yarn:

          yarn global add parcel-bundler

          npm:

          npm install -g parcel-bundler

          使用以下命令在你的項目目錄中創建一個 package.json 文件:

          yarn init -y

          or

          npm init -y
          


          具體操作請查考文檔:http://www.css88.com/doc/parcel/asset_types.html


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/252

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网