使用 require.js 将应用程序的 javascript 拆分为多个 JS 文件

Split app's javascript in multiple JS files using require.js

本文关键字：JS 文件 拆分 javascript js require 应用程序 使用      更新时间：2023-09-26

我一直在寻找一种方法将我的一页应用程序的 js 文件拆分为多个。喜欢这个：

plugins.js
open.js
closed.js
admin.js

因此，当用户加载第一页时.js插件和打开.js都会加载。另一个仅在特定页面中加载（例如关闭的部分或管理部分，这是关闭的，所以我会在其他页面之后加载它）。今天，我的所有应用程序用户都加载了整个沉重而缩小的javascript文件。

我可以使用require.js做到这一点吗？我找不到任何关于这种方法的参考。

谢谢。

请看一下 require-lazy。它是功能性的，但暂时有点缺乏文档，所以最好的办法是看一下示例。

简而言之，它的作用是在优化器（r.js）之上创建一个层，以便感知应用程序拆分点并生成适当的捆绑包。可以使用 lazy! AMD 插件显式声明应用程序拆分点：

define(["module1","lazy!module2"], function(m1,m2) {...});

在上述情况下，不加载module2;而是注入具有get()方法的对象。 仅当调用 m2.get() 时加载module2（它返回一个 promise）。构建过程将为上述情况创建 2 个捆绑包：一个包含主文件和module1.js，另一个包含module2.js 。

我还实现了"发现"模块的机制，请参见module-discovery示例。

相关项目：require-lazy-grunt（即将起飞）和angular-require-lazy。

你可能想看看Grunt.js并将其与它的contrib-uglify插件结合起来。我制作了一个简单的样板包来帮助我开始新项目，其中包括Grunt和简单的contrib-uglify实现。

您必须指定哪些文件应连接到哪些文件，然后可以根据您在应用中的位置动态加载每个文件。

您还可以使用 Modernizr 对页面上的 html 标记进行功能检测/和/或将相应的类分配给，然后使用 Yepnope 有条件地异步加载资源并仅提供用户需要的文件 - 根据可用的功能或仅基于您定义的类，例如contact-page。

您可以将JS代码分成几个较小的文件。然后在每个页面的<head>部分中仅包含相关的JS文件。

<head>
  ...
  <script type="text/javascript" src="plugins.js"></script>
  <script type="text/javascript" src="open.js"></script>
</head>

如果你真的需要决定是否动态加载脚本文件，那么 RequireJS 将完成这项工作。他们的网站上有很好的记录如何使用它。但是，据我了解，在您的情况下，这将是矫枉过正。

我建议使用Webpack而不是requireJS。Webpack 被明确设计用于将前端代码编译在一起 - 即拉入依赖项以从许多模块生成单个 js 文件 - 然后根据每个页面的需要将其拆分为多个文件。这不是一个完整的 180 度更改 - 您可以保留大部分 requireJS 语法，因为它支持开箱即用的 AMD 模块（以及 UMD 和 CommonJS）。切换的过程并不太复杂。

它还可用于监视您的文件，并在其中一个文件更改时自动重新编译 - 因此可以持续保持代码的正确拆分。

它还在 RequireJS 之外做了很多非常酷的事情，例如处理 CSS 和 JS 文件之间的交叉依赖关系，将请求的填充程序注入所有文件等。

附带说明一下，我发现 Webpack 在集成到 Gulp 自动编译工作流程中时特别强大。你不必 - 我只是发现这个组合特别有效。

当然！

dir和modules的优化器配置选项正是您所需要的。

你应该写这样的东西，一个优化器配置文件馈送并乘以缩小的javascript文件：

{
    // dir is white your temp build files put
    dir: 'build-temp-dir',
    // one module for one minified javascript file
    modules: [{
        // module names are relative to baseUrl
        name: 'mylib/module-entry1',
        // include something else
        include: ['mylib/module2']
    },
    // other one minified javascript file
    {
        name: 'mylib/module-entry2',
        // if you don't want repetitive code put in the two out files
        // just exclude it
        exclude: ['mylib/module-entry1']
    }]

}

请务必查看 requirejs 官方多页演示和模块配置选项

相关文章：