Question

我的应用程序的“main.js”文件已经长大了，所以我想找到一种方法将它拆分到其他一些不同的文件上，避免只有一个巨大的文件，它会延迟我页面的第一次加载。

我目前正在发布一个捆绑文件=＆gt; main.js包含许多与每个模块交互的模块。

我想拆分/转换这个：

            - main.js ===> - global.js
                           - a.js
                           - b.js
                           - c.js

所以，对于我的三个网页，我想加载这样的脚本：

//Page A
<script src="global.js">
<script src="a.js">

//Page B
<script src="global.js">
<script src="b.js">

//Page C
<script src="global.js">
<script src="c.js">

这四个分裂的捆绑包将包含现在之间的依赖关系其他模块，这不是什么大问题，可以解决在每个内部使用require。
[a，b，c]之间没有模块依赖关系。
问题是[a，b，c]包含依赖于[global]的模块......我不知道如何处理这种情况。

这是发生的事情的一个小例子：

global.js

//[module_global1]
  var mod = {};
  (...)
  module.exports = mod;


//[module_global2]
  var mod = {}; 
  var module_global1 = require("./module_global1");

  //(...)
  module.exports = mod;

a.js

//[module_a1]
  var mod = {};
  (...)
  module.exports = mod;


//[module_a2]
  var mod = {}; 
  var module_a1 = require("./module_a1");

  //HERE => How?
  var module_global1 = require("./module_global1");

  //(...)
  module.exports = mod;

b.js

//[module_b1]
  var mod = {};
  (...)
  module.exports = mod;


//[module_b2]
  var mod = {}; 
  var module_b1 = require("./module_b1");

  //(...)
  module.exports = mod;

//[module_b3]
  var mod = {}; 
  var module_b1 = require("./module_b1");
  var module_b2 = require("./module_b2");

  //HERE => How?
  var module_global2 = require("./module_global2");

  //(...)
  module.exports = mod;

c.js

//[module_c1]
  var mod = {};

  //HERE => How?
  var module_b2 = require("./module_b2");

  (...)
  module.exports = mod;

我认为这可以很容易地解决[global，a，global-b，global-c]在[a，b，c]上的[全局]捆绑[global-a，global-b，global-c]。

但实际上，代码的大部分都在全局内部，所以当第一次在页面上加载时，全局不会被缓存，它将在页面上支付加载时间。

我也不会将[global]的变量作为全局变量。

我该怎么办？也许与AMD或类似的东西合并？

将浏览器化捆绑文件拆分到其他文件上，保持它们之间的依赖关系

0 个答案: