📅  最后修改于: 2020-10-20 05:00:16             🧑  作者: Mango
在本章中,我们将讨论RequireJS中的优化。 RequireJS中的优化器具有以下特征-
结合脚本文件和UglifyJS的帮助(用于默认用法)或Closure Compiler(用于Java)
将CSS文件合并在一起。
优化器是用于Node和Nashorn的r.js适配器的组件。它被开发为构建过程的一部分,而不是开发过程的一部分。
在将r.js下载到您的项目文件夹后,该文件夹的结构应如下所示-
projectfolder/
|-->index.html
|-->CSS/
|--->main.css
|--->other.css
|-->libs
|--->require.js
|--->main.js
|--->dependent1.js
|--->dependent2.js
|--->dependent3.js
您的HTML文件如下所示-
RequireJS Sample Page
您的main.js文件将如下所示-
require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2,
dependent3) {
});
您的main.css文件将如下所示-
@import url("other.css");
.app {
background: transparent url(../../img/app.png);
}
您可以使用命令行参数或概要文件构建属性来设置项目,两者可以互换。
以下是命令行的语法-
node r.js -o baseUrl = . paths.jquery = content/path/jquery
name = main out = main-built.js
以下是构建配置文件的语法-
({
baseUrl: ".",
paths: {
jquery: "content/path/jquery"
},
name: "main",
out: "main-built.js"
})
之后,您可以在命令行中将构建配置文件名称传递给优化器,如下所示:
node r.js -o build.js
命令行参数语法有一些缺点。命令行参数或配置文件构建属性的组合使用可以克服这些缺点。
要优化单个JS文件,您需要创建一个包含所有依赖项内容的JS文件。您的文件应如下所示-
({
baseUrl: "js/shop",
paths: {
"jquery": "jquery",
"backbone": "backbone",
"underscore": "underscore"
},
shim: {
"backbone": {
"department": ["underscore", "jquery"],
"dependent": "Backbone"
},
"underscore": {
exports: "_"
}
},
name: "../main",
out: "../built/js/main.js"
})
现在,您可以创建具有应用程序所有依赖项的main.js文件。 HTML文件中使用此文件,以一个请求加载所有JS文件。请注意,创建的文件不应在源代码目录中。文件应位于项目的副本中。
优化器不会使用网络资源/ CDN(内容交付网络)加载脚本。如果需要使用CDN加载脚本,则需要将这些文件映射到模块名称,然后将文件下载到本地文件路径。您可以在构建配置文件的路径配置中使用特殊词“空”,如以下语法所示:
({
baseUrl: "js",
name: "mainCDN",
out: "js/mainCDN-built.js",
paths: {
jquery: "empty:"
}
})
主文件如下所示-
requirejs.config({
paths: {
'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
}
});
require(['jquery'], function ($) {
});
直接在命令行中使用以下参数优化CSS文件,如下所示-
node ../../r.js -o cssIn = main.css out = main-built.css
CSS文件也可以使用如下所示的相同属性在构建文件中进行优化-
...
cssIn:"main.css",
out:"main-built.css"
...
以上两种方法均被允许,并将创建一个名为projectfolder / css / mainbuild.css的文件。该文件将包含main.css的内容,已正确调整的url()路径以及已删除的注释。
优化器使用构建配置文件来优化所有的css和js文件。在以下示例中,将创建build.js文件。
({
baseUrl: "js/shop",
appDir: '.',
paths: {
"jquery": "jquery",
"backbone": "backbone",
"underscore": "underscore"
},
shim: {
"backbone": {
"deps": ["underscore", "jquery"],
"exports": "Backbone"
},
"underscore": {
exports: "_"
}
},
optimizeCss: "standard.keepLines",
modules: [
{
name: "app"
}
],
dir: "../built"
})
build.js文件指示RequireJS将所有app文件夹(appDir参数)复制到已构建的输出文件夹(dir参数),并将所有优化应用于位于输出文件夹中的文件。运行以下命令以在app文件夹中构建配置文件-
node r.js -o build.js