您現在的位置是:電腦技術吧?>? 故障問題 ??>??項目優化是什么,項目優化分析??>??正文詳情

項目優化是什么,項目優化分析

可博贍2019-12-18 15:02:36 人圍觀
簡介流程優化方案本文演示如何合并和壓縮基于requirejs的項目。在本文中,我將使用一些艱苦的工具,包括node.js。所以如果你手頭沒有node.js,你可以在這里下載一個多目標優化

本文將演示如何合并與壓縮一個基于RequireJS的項目。

本文中將用到苦干個工具,這其中就包括Node.js。

因此,如果你手頭上還沒有Node.js可以點擊此處下載一個。

  動機  關于RequireJS已經有很多文章介紹過了。

這個工具可以將你的JavaScript代碼輕易的分割成苦干個模塊(module)并且保持你的代碼模塊化與易維護性。

這樣,你將獲得一些具有互相依賴關系的JavaScript文件。

僅僅需要在你的HTML文檔中引用一個基于RequireJS的腳本文件,所有必須的文件都將會被自動引用到這個頁面上.  但是,在生產環境中將所有的JavaScript文件分離,這是一個不好的做法。

這會導致很多次請求(requests),即使這個些文件都很小,也會浪費很多時間。

可以通過合并這些腳本文件,以減少請求的次數達到節省加載時間的目的。

  另一種節省加載時間的技巧是縮小這些被加載文件的大小,相對小一些的文件會傳輸的更快一些。

這個過程叫作最小化 (minification) ,它是通過小心的改變腳本文件的代碼結構并且不改變代碼的形為(behavior)和功能(functionality)來實現的。

例如這些:去除不必要的空格,縮短(mangling,或都壓縮)變量(variables)名與函數(methods,或者叫方法)名,等等。

這種合并并壓縮文件的過程叫做代碼優化( optimization)。

這種方法除了用于優化(optimization)JavaScript文件,同樣適用于CSS文件的優化。

  RequireJS有兩個主要方法(method): define()和require()。

這兩個方法基本上擁有相同的定義(declaration) 并且它們都知道如何加載的依賴關系,然后執行一個回調函數(callback function)。

與require()不同的是, define()用來存儲代碼作為一個已命名的模塊。

因此define()的回調函數需要有一個返回值作為這個模塊定義。

這些類似被定義的模塊叫作AMD (Asynchronous Module Definition,異步模塊定義)。

  如果你不大熟悉RequireJS或者不太明白我寫的東西 - 不要擔心。

下面有一個關于這些的例子。

  JavaScript應用程序的優化  在本小節中我將向大家展示如何優化Addy Osmani的TodoMVC Backbone.js RequireJS 項目。

由于TodoMVC項目在不同的框架下包含許多TodoMVC實現,我下載了1.1.0版并提取出Backbone.js RequireJS應用程序。

點擊這里下載該應用程序并解壓下載到的zip文件。

todo-mvc的解壓目錄將是我們這個例子的根目錄(root path),從現在起我將把這個目錄引用為

  查看/index.html的源代碼,你會發現它僅僅包含了一個script標簽(另外一個是當你使用Internet Explorer時引用的):  index.html引用腳本文件的代碼  ? 1 2 3 4 script data-main=js/main src=js/lib/require/require.js/script !--[if IE] script src=js/lib/ie.js/script ![endif]--   其實,整個項目只需要引用require.js這個腳本文件。

如果你在瀏覽器中運行這個項目,并且在你喜歡的(擅長的)調試工具的network標簽中, 你就會發現瀏覽器同時也加載了其它的JavaScript文件:

  所有在紅線邊框里面的腳本文件都是由RequireJS自動加載的。

  我們將用RequireJS Optimizer(RequireJS優化器)來優化這個項目。

根據已下載的說明文件,找到r.js并將其復制到目錄。

jrburke的r.js是一個能運行基于AMD的項目的命令行工具,但更重要的是,它包含RequireJS Optimizer允許我們對腳本文件(scripts)合并與壓縮。

  RequireJS Optimizer有很多用處。

它不僅能夠優化單個JavaScript或單個CSS文件,它還可以優化整個項目或只是其中的一部分,甚至多頁應用程序(multi-page application)。

它還可以使用不同的縮小引擎(minification engines)或者干脆什么都不用(no minification at all),等等。

本文無意于涵蓋RequireJS Optimizer的所有可能性,在此僅演示它的一種用法。

  正如我之前所提到的,我們將用到Node.js來運行優化器(optimizer)。

用如下的命令運行它(optimizer):  運行RequireJS Optimizer  ? 1 $ node r.js -o arguments   有兩種方式可以將參數傳遞給optimizer。

一種是在命令行上指定參數:  在命令行上指定參數  ? 1 $ node r.js -o baseUrl=. name=main out=main-built.js   另一種方式是構建一個配置文件(相對于執行文件夾)并包含指定的參數 :  ? 1 $ node r.js -o build.js   build.js的內容:配置文件中的參數  ? 1 2 3 4 5 ({ baseUrl: ., name: main, out: main-built.js })   我認為構建一個配置文件比在命令行中使用參數的可讀性更高,因此我將采用這種方式。

接下來我們就為項目創建一個/build.js文件,并且包括以下的參數: /build.j  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ({ appDir: './', baseUrl: './js', dir: './dist', modules: [ { name: 'main' } ], fileExclusionRegExp: /^(r|build).js$/, optimizeCss: 'standard', removeCombined: true, paths: { jquery: 'lib/jquery', underscore: 'lib/underscore', backbone: 'lib/backbone/backbone', backboneLocalstorage: 'lib/backbone/backbone.localStorage', text: 'lib/require/text' }, shim: { underscore: { exports: '_' }, backbone: { deps: [ 'underscore', 'jquery' ], exports: 'Backbone' }, backboneLocalstorage: { deps: ['backbone'], exports: 'Store' } } })   弄明白RequireJS Optimizer的所有配置項并不是本文的目的所在,但我想解釋(描述)一下本文中我所采用的參數:

  了解RequireJS Optimizer的更多介紹以及更多高級應用,除了其網頁早先提供的資料,你可以點擊此處查閱所有可用配置選項的詳細的信息。

  既然現在已經有了構建文件(build file),那么就可以運行優化器(optimizer)了。

進入 目錄并執行如下命令:  運行優化器(optimizer)  $ node r.js -o build.js  一個新的文件夾會被生成:/dist。

重要的是要注意到,現在/dist/js/main.js包含了所有已合并與壓縮的具有依賴關系的文件。

此外,/dist/css/base.css也被優化了。

  運行優化后的項目,它看起來與未優化之前的項目完全一樣。

再檢查一下該頁面的網絡傳輸(network traffic)信息,會發現僅有兩個JavaScript文件被加載。

  RequireJs Optimizer將服務器上的腳本文件從13個減少到2個并且將文件的總大小從164KB減少到58.6KB(require.js與main.js)。

  開銷  顯然,在優化之后,我們再也沒有必要引用require.js文件了。

因為已經沒有被分離的腳本文件了并且所有具有依賴關系的文件也已被加載。

  盡管如此,優化過程將我們所有的腳本合并生成了一個優化后的腳本文件,其中包含了很多次define() 和require()調用。

因此,為了保證應用程序能夠正常運行,define()和require()必須指定并實施到應用程序的某處(即包含這些文件)。

  這會導致一個眾所周知的開銷:我們總是會有一些代碼實現define()和require()。

這些代碼并不是應用程序的一部分,它們的存在僅僅是為我們的基礎建設考慮(infrastructure considerations)。

當我們開發一個JavaScript庫(JavaScript library)時,這個問題變得尤為巨大。

相比RequireJS,這些庫通常都很小,因此在庫中包含它會造成一筆巨大的開銷。

  在我寫這篇文章的時候,對于這方面的開銷還沒有一個完整的解決方案,但是我們可以使用almond來緩解這個問題。

Almond是一個極簡單的AMD加載器,它實現了RequireJS接口(API)。

因此,可以用來在已優化過的代碼中替代RequireJS實現,我們可以在項目中包含almond。

  如令,我正致力于開發一個優化器(optimizer),它將能夠優化RequireJS應用程序,而無需開銷,但它仍然是一個新的項目(處于開發的初期階段)因此這里沒有任何關于它的展示。

  下載與總結  下載 未經優化的TodoMVC Backbone.js RequireJS 項目或者查看它。

  下載 優化后的TodoMVC Backbone.js RequireJS 項目(位于dist文件夾下)或查看它。

版權聲明:本文由 可博贍 整理編輯。

原標題:優化項目實施環境,工程優化

轉載注明出處:http://www.dn9ww09s.icu/fault/15529.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • C內核開發,IDEA可以開發C號碼

    C內核開發,IDEA可以開發C號碼 相關圖片linux系統下C開發一。Cocoapods是一個運行在ruby中的軟件,可能需要幾分鐘才能安裝。安裝名稱是sudo gem install cocopods 2。如果要為每個第三方開源C開發工具...

  • 有愛插件字符串,防騎WA插件字符串

    有愛插件字符串,防騎WA插件字符串 相關圖片wa字符串導入不進去本文主要介紹了亞音速3.0插件更新字符串過長引起的異常修復方法。對于您的朋友,請參考公司客服最近提交的一個bug。更新產品詳細信息時,其中一些無法更新。他...

  • jsp多選框,jsp中接收多選框數組

    jsp多選框,jsp中接收多選框數組 相關圖片jsp復選框代碼在struts 1項目中,JSP頁面的多選框內容被轉移到下一頁。當涉及到修改表信息(或用戶信息)時,很難在一開始就知道如何實踐這個函數,很多JS代碼都是為了勉強jsp怎么獲...

  • 數據庫存取錯誤,java存取數據庫的包

    數據庫存取錯誤,java存取數據庫的包 相關圖片數據庫特點ADO訪問數據庫時是否顯示頁面?如果你目前已經在很多網站上使用過電子公告板程序,你應該知道,為了提高頁面的閱讀速度,電子公告板程序一般不會把所有的帖子都列在...

  • ip數據庫有什么用,連接數據庫IP

    ip數據庫有什么用,連接數據庫IP 相關圖片mysql數據庫ip地址本文主要介紹Python訪問純IP數據庫腳本共享,本文直接給出了實現代碼,可以參考以下項目的需要,通過IP地址來確定客戶端是Netcom還是電信。我從我的同事那sql數據庫...

  • 常見編程術語,編程專業術語

    常見編程術語,編程專業術語 相關圖片計算機編程中常用的術語php什么意思?很多行外人看這三個會毫無頭緒完全不知道php是什么,本文小編就為大家詳細介紹一下php的含義,帶來編程術語php百科解釋。  php什么意思?編什么...

  • SQL中MINUS的用法,sql中iif函數的用法

    SQL中MINUS的用法,sql中iif函數的用法 相關圖片grant在數據庫中用法對于XML路徑:有些人可能知道有些人可能不知道,但實際上,它是以XML形式顯示查詢結果集。有了它,我們可以簡化查詢語句,以實現一些可能需要在之前的功能性實...

  • solr搜索引擎,搜索引擎和solr

    solr搜索引擎,搜索引擎和solr 相關圖片搭建搜索引擎Solr是一個獨立的企業搜索應用服務器,它提供了一個類似于web服務的API接口。用戶可以通過HTTP請求向搜索引擎服務器提交一定格式的XML文件,生成索引。大搜索引擎el...

  • 導入導出是什么意思,導入導出聯系人怎么用

    導入導出是什么意思,導入導出聯系人怎么用 相關圖片mysql數據導入導出Linux系統引導Oracle自引導以根用戶身份登錄:Su-root 1,Linux下Oracle的dbstart和dbshut不響應:modify Oracljava導入導出...

  • git使用教程圖文詳解,github使用教程圖文詳解

    git使用教程圖文詳解,github使用教程圖文詳解 相關圖片tortoisesvn使用教程Android Studio 1.0的官方版本終于發布了!谷歌表示,Android Studio 1.0可以讓開發人員更快、更高效,它可以取代eclipse,并git管理工具使用教程...

熱評文章

  • oracle數據庫常用命令,Oracle PlSQL常用命令

    oracle數據庫常用命令,Oracle PlSQL常用命令 相關圖片oracle命令大全1)檢查集群狀態:[[email protected]~]$crsctl check cluster crs-4537:cluster readyservices is onoracle基本命令...

  • 宏數據庫,數據庫中的宏

    宏數據庫,數據庫中的宏 相關圖片含有宏的數據庫如果有許多宏,將它們分組到不同的宏組中可以幫助方便地管理數據庫。創建表單并添加4個按鈕(如果出現“按鈕向導”對話框,請選擇“取消”)。根據創建宏的方法...

  • android橫向滑動,excel滑動條橫向太長

    android橫向滑動,excel滑動條橫向太長 相關圖片表格怎么設置上下滑動本文主要介紹在Android中實現水平滑動(horizontallsliding)listview的實例。本文采用控件自身封裝的方法來解決這一需求。您可以參考A在表格中滑動條橫向怎么去掉...

  • 程序是由程序員編寫的,程序是程序員編寫的

    程序是由程序員編寫的,程序是程序員編寫的 相關圖片程序員嗎為什么要記錄?你將在六個月內使用你的代碼。我覺得首先從個人利益的角度來解釋這個問題很有吸引力。最好的記錄理由是你將在六個月內使用你的代碼。您六個月前編寫的...

  • php讀取文件夾,php文件夾

    php讀取文件夾,php文件夾 相關圖片php讀取文件函數本文的例子描述了PHP從文件夾中隨機讀取文件的方法。與您分享以供參考。具體實現方法如下:?12345678910131415161718192021222325php讀取空間指定文件夾內容...

  • 數據怎么存入數據庫,文件存入數據庫

    數據怎么存入數據庫,文件存入數據庫 相關圖片數據庫可以存數組嗎用ASP編寫網站應用程序需要很長時間,不可避免地會產生各種問題。恐怕最常見的問題是如何上傳文件到服務器,尤其是上傳圖片。比如,如果你想在自己的社區實...

  • object獲取值,獲取textbox的值

    object獲取值,獲取textbox的值 相關圖片textarea怎么獲取值本文主要介紹如何獲取DataRow[]的值。您可以引用DataRow[]Dr=DT。Select(T1=a');結果是一個數組,您只需要循環該數組。代碼如下:Sjs獲取標簽的值...

  • pyramid scheme,schemes什么意思

    pyramid scheme,schemes什么意思 相關圖片qq音樂url schemes在IOS應用程序中,經常可以看到一些應用程序通過單擊操作直接跳轉到app store頁面。首先,奇怪的是,這個第三方應用程序是如何在IOS系統應用程序交互中實現url schemes 微...

  • 電腦用戶鎖定怎么解除,用戶已被鎖定

    電腦用戶鎖定怎么解除,用戶已被鎖定 相關圖片華為賬號鎖定怎么解除甲骨文解鎖Scott/Tiger用戶。一。為Scott用戶驗證當前系統的狀態:從DBA中選擇*[users where upper(username)='Scowin10賬戶鎖定多久解除...

  • javascript提交表單,js自動提交表單

    javascript提交表單,js自動提交表單 相關圖片form表單提交多條數據本文主要介紹了對JSON格式表單數據提交相關資料的深入分析。供您參考的是,以JSON編碼格式提交表單數據是HTML5對web發展和演進的又一貢獻。以前,我們的Hajax提交...

關注微信

变脸官网查询