現在有一個需求,把頭部的資源提出去例如css,js.現在是 用php模板引入的如下圖
html_header.php
index.html
#實際上php中的資源是不全的,而每個頁面需要的資源也是不同的,有一些共通性的需要被提取出來。
目前的想法是用require.js 把共性的模組透過main.js引入,各個頁面私有的模組現用現引入
在網路上看了下require的用法在main.js中
require (["jq","react","vue"],function(a,b,c) {some code...})
在陣列中引入模組在回呼中傳入對應參數開始寫入程式碼。可是這麼寫不是把所有的程式碼都寫在main.js上了?
現在很多程式碼是直接寫在頁面上的 我只想引入模組,例如引入一個JQ 然後在頁面上$(document).ready(function() {})
依照領導的意思,最好是按需加載,例如把頭部提出去,就像上面的php檔案一樣,把共性的css.js先寫進去,然後可以接受參數,每個頁面可以傳遞參數自訂所需的資源,求各位大神指點實在不知道怎麼做了
自訂開發的架構嗎? PHP按需載入這種功能一般的CMS都有實現,如drupal, joomla。用到什麼就在PHP加什麼,然後PHP給頁面用到的JS都合併壓縮,下載容量就變少。如drupal7透過以下程式碼載入JS:
用require.js的確是需要把需要載入的JS都寫在main.js上,你想每頁載入的JS不同,那這個main.js用PHP生成就可以了。在magento2上也用了requireJS,它就是有自己的機制來產生requirejs config,實作每頁都能按需載入。不過如果JS個數真的很多,還是把它們都合併壓縮比較好,不然可能影響載入時間,還得配CDN來緩解。
requireJS現已支援按需載入
require(["xxxx"], function(xxx){
})