Angularjs的按需載入 1

今天來聊一聊一直困擾了我很久的問題.angularjs的按需載入.

angular的好處這裡就不用多說,

但是用久了你會發現,乙個**所有的 controller, service, directive等等,全部載入完了,

頁面才開始跑.

小專案,**少.不會感覺太大問題.

但是頁面多了,那主頁越來越臃腫.有用的,沒用的通通載入進來.

雖說全部載入,頁面第一次開啟會慢很多,之後開啟的頁面速度會極快.

但是,這一點都不smart.

那有什麼辦法可以做到按需載入呢?

其實很簡單,看**:

config([

'$controllerprovider'

,'$compileprovider'

,'$filterprovider'

,'$provide'

,function

($controllerprovider, $compileprovider, $filterprovider, $provide)])

;我們要先把angular的方法替換成內部使用的方法,

這樣我們在後面才可以正常的按需載入controller, service, directive…

接下來,我們選擇乙個模組載入器,

流行的載入器有很多,require.js,sea.js,system.js 等等.

選乙個最經典的 require.js;

下面是按需載入的小demo

github demo

我們先配置好,require的config;

require.

config(,
shim:}}
);

define([

'angular'
,'ui.router'],
function()
]);config([
'$stateprovider'
,'$urlrouterprovider'
,function
($stateprovider, $urlrouterprovider));
return deferred.promise;}]
}})}
])})

你好呀,李銀河;

>
}p>

define([

],function])
})

require([

],function()
);

lang

="en"
>
>
charset
="utf-8"
>
>
title
>
head
>
>
ui-view
>
div>
src=
""data-main
=>
script
>
body
>
html
>

以上就是 example1的全部**;

今天先到這裡,接下來的時間裡,會慢慢解釋上面的**,已經所涉及到的知識;

還有如何按需載入第三方module,以及以上**的弊端;

Vant按需載入

librarydirectory 複製 按需引入vant元件 import from vant 複製 使用vant元件 vue.use datetimepicker use button use list 複製 type primary 按鈕複製 複製 ps 出來vant庫外，像antiui ele...

antd按需載入

antd 是螞蟻金服推出的一套非常好的react ui庫,使用起來特別方便,而且也推出了antd手機端庫,同時還推出了vue的使用方式 import react from react import from antd import antd dist antd.css return 按鈕 在antd...

lodash按需載入

lodash提供了很多可用的方法供我們使用，是乙個很好用且用起來得心應手的工具庫。但是同時，lodash的體積也不小，我們在使用的時候可能只是使用了幾個方法，但是卻把整個lodash庫引入了。殺雞用了牛刀的感覺！對於這個問題，有幾種方案可供選擇。一.引入單個函式 lodash整個安裝完之後，引用方式...