5

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

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

因此，当用户加载第一页时，plugins.js 和 open.js 被加载。另一个仅在特定页面中加载（例如关闭部分或管理部分，该部分已关闭，因此我将在其他页面之后加载它）。今天，我所有的应用程序用户都加载了整个繁重且缩小的 javascript 文件。

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

谢谢。

4

5 回答 5

3

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

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

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

在上述情况下，module2未加载；get()而是注入带有方法的对象。module2仅在m2.get()被调用时加载（它返回一个承诺）。构建过程将为上述情况创建 2 个包：一个包含主文件，module1.js另一个包含module2.js.

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

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

于 2013-10-30T22:17:16.967 回答
1

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

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

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

于 2013-10-30T22:36:57.383 回答
1

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

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

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

于 2013-10-30T22:15:38.793 回答
0

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

它还可以用于监视您的文件，并在其中一个文件发生更改时自动重新编译——因此您的代码的正确拆分将得到持续维护。

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

附带说明一下，我发现 Webpack 在集成到 Gulp 自动编译工作流中时特别强大。您不必这样做 - 我只是发现这种组合效果特别好。

于 2015-09-04T19:53:30.273 回答
0

当然！

的优化器配置选项是您所需要的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 官方多页演示 和模块配置选项

于 2015-12-23T06:35:30.850 回答