如何优化作为RequireJS模块创建的JavaScript文件子集

How to optimize a subset of JavaScript files created as RequireJS modules

本文关键字：创建 模块 JavaScript 子集 文件 RequireJS 何优化 优化      更新时间：2023-09-26

我有一个单页web应用程序，它使用RequireJS来组织和构建JavaScript代码。在应用程序中，我有一些JS文件，我想使用r.js优化，因为它们属于一个API，将由我的客户消费。所以，我只想优化这些文件，并保持剩下的代码现在的样子。

这是我的应用程序结构:

  • 应用程序
    • main.js
    • 许多其他文件和文件夹
  • 脚本
    • myAPI
      • app.js
      • 许多其他文件和文件夹
    • require.js
    • jquery.js
    • build.js
  • 你

所有JavaScript代码位于app和scripts文件夹下。正如我前面提到的，所有这些文件都被定义为RequireJS模块。这是main.js现在的样子:

require.config({
    baseUrl: 'scripts',
    paths: {
        base: 'myAPI/base',
        proxy: 'myAPI/proxyObject',
        localization: 'myAPI/localization',
        app: '../app',
    }
});
require(['myAPI/app'],
    function (app) {
        //app.init....
    }
);
如您所见，在paths配置中，我定义了一些指向myAPI(我要优化的文件夹)的别名。

我是这样从index.htm文件中引用RequireJS的:

<script data-main="app/main" src="scripts/require.js"></script>
这是我为r.js创建的构建文件(scripts/build.js): 
({
   baseUrl: '.',
   out: 'build/myAPI.js',
   name: 'myAPI/app',
   include: ['some modules'],
   excludeShallow: ['some modules defined in the app folder'],
   mainConfigFile: '../app/main.js',
   optimize: 'uglify2',
   optimizeCss: 'none'
})

优化后的文件生成，但我有一些挑战试图使用它:

  1. 我如何从应用程序引用该文件?
  2. 对myAPI模块的依赖现在被破坏了。RequireJS找不到myAPI中定义的模块。
  3. 我能做些什么来保持在require.config.paths中定义的别名工作?

对于这种情况，你能给我一些建议或反馈吗?

谢谢! !

做了研究之后，我可以解决我的问题。我基于我的解决方案在这个由James Burke创建的Github项目:https://github.com/requirejs/example-libglobal.

首先，我必须删除对myAPI各个模块的所有依赖，并创建一个对象来集中对任何内部依赖的访问。然后，我创建了一个r.js脚本来为myAPI生成一个文件。该文件将被其他JS文件使用。正如James Burke在Github项目中所示，该文件可以作为全局对象或AMD模块被引用。

不再需要require.config.paths中定义的别名。

相关文章：