javascript - require.js引入模組和js按需加載

Question

現在有一個需求，把頭部的資源提出去例如css,js.現在是 用php模板引入的如下圖

html_header.php

index.html

#實際上php中的資源是不全的，而每個頁面需要的資源也是不同的，有一些共通性的需要被提取出來。
目前的想法是用require.js 把共性的模組透過main.js引入，各個頁面私有的模組現用現引入
在網路上看了下require的用法在main.js中
require (["jq","re​​act","vue"],function(a,b,c) {some code...})
在陣列中引入模組在回呼中傳入對應參數開始寫入程式碼。可是這麼寫不是把所有的程式碼都寫在main.js上了？
現在很多程式碼是直接寫在頁面上的 我只想引入模組，例如引入一個JQ 然後在頁面上$(document).ready(function() {})

依照領導的意思，最好是按需加載，例如把頭部提出去，就像上面的php檔案一樣，把共性的css.js先寫進去，然後可以接受參數，每個頁面可以傳遞參數自訂所需的資源，求各位大神指點實在不知道怎麼做了

Answer 1

自訂開發的架構嗎？ PHP按需載入這種功能一般的CMS都有實現，如drupal, joomla。用到什麼就在PHP加什麼，然後PHP給頁面用到的JS都合併壓縮，下載容量就變少。如drupal7透過以下程式碼載入JS：

drupal_add_js('misc/collapse.js');

用require.js的確是需要把需要載入的JS都寫在main.js上，你想每頁載入的JS不同，那這個main.js用PHP生成就可以了。在magento2上也用了requireJS，它就是有自己的機制來產生requirejs config，實作每頁都能按需載入。不過如果JS個數真的很多，還是把它們都合併壓縮比較好，不然可能影響載入時間，還得配CDN來緩解。

Answer 2

requireJS現已支援按需載入
require(["xxxx"], function(xxx){

var $= require("jquery");
$(document).ready(function() {})

})