tomwayson/esri-slurp-example

语言: JavaScript

git: https://github.com/tomwayson/esri-slurp-example

如何使用grunt-esri-slurp下载的Esri JSAPI源代码进行Dojo构建的示例
Example of how to do a Dojo build with Esri JSAPI source code downloaded using grunt-esri-slurp
README.md (中文)

ESRI-啜食-示例

DEPRECATED使用ArcGIS API for JavaScript的bower构建。

这个repo的目的是展示如何使用grunt-esri-slurp下载的Esri JSAPI源代码进行Dojo构建。构建配置文件和grunt配置大量来自AGRC JavaScript Project Boilerplate,它本身基于Dojo Boilerplate。但是,此repo中的配置将被简化为仅演示创建具有Esri映射的简单“app”的自定义Dojo构建所需的内容(基于创建映射示例页面)。

说明

在运行以下步骤之前,您必须安装Node.js以及Grunt CLI。

使用npm安装Grunt任务:

npm install

使用bower下载Dojo和其他依赖项:

bower install

使用grunt-esri-slurp下载用于JavaScript的ArcGIS API的AMD版本:

grunt slurp

要验证所有依赖项是否到位,您可以使用以下命令为未构建的应用程序提供服务:

grunt connect:src

然后浏览到http:// localhost:9000 /并验证它是否有效。

最后,构建应用程序:

grunt build

要验证构建是否成功,您可以使用以下内容为构建的应用程序提供服务:

grunt connect:dist

然后浏览到http:// localhost:9000 /并验证它  作品。您可以检查网络流量,以验证应用程序的构建版本是否请求更少和更小的脚本(请参阅下文)。

比较内置应用程序

为了确定我们的构建是否改善了用户体验,我们需要验证构建的页面是否减少了脚本请求,并且与引用标准和紧凑CDN托管版本的类似页面相比,所请求脚本的大小更小。 API。此示例中的“app”基于Search multiple sources示例页面,为方便起见,此repo包含该页面的副本以及使用紧凑版本的副本(在samples文件夹下)。我编译了下面不同构建之间的文件请求和大小的比较。

页面| JS请求| JS KB(gzipped)| JS KB(未压缩) ------ | ----------------- | ------------- | --------------- | --------------- dist / index.html(内置应用)| 1 | 304 | 792 samples / search_multiplesources_compact.html | 23 | 348 | 850 samples / search_multiplesources.html | 7 | 431 | 1091

但是,您的里程可能会有所不同,在决定是否值得进行Dojo构建时,需要考虑许多因素。如果您的代码很小和/或没有引用许多尚未包含在其中一个CDN版本中的模块,那么本地构建可能无济于事。相反,在创建具有许多模块的应用程序时,在大多数情况下,您应该看到对CDN构建的重大改进。

减少构建输出的大小(在磁盘上)

默认情况下,Dojo构建输出源文件的未压缩版本以及源映射以帮助调试。如果您不需要源映射或未压缩文件(例如,如果使用未构建的源进行调试),则可以通过取消注释app.profile.js中的以下行来节省运行构建时的时间和空间:

// useSourceMaps: false

通过在构建之后运行以下grunt命令,可以进一步减小输出目录的大小50%或更多:

grunt clean:uncompressed
grunt clean:stripped

资源

  • 咕噜,ESRI,啜食
  • AGRC JavaScript项目Boilerplate
  • 道场锅炉
  • Dojo构建教程
  • Dojo Build参考指南
  • ArcGIS API for JavaScript Compact Build

信用

这里没有新的东西。可敬的@steveoh和@stdavis已经做了很多努力。这只是为了让他们已经完成的伟大工作更加平易近人(即使他们嘲笑我)。

本文使用googletrans自动翻译,仅供参考, 原文来自github.com

en_README.md

esri-slurp-example

DEPRECATED Use the bower build of the ArcGIS API for JavaScript instead.

The purpose of this repo is to show how to do a Dojo build with Esri JSAPI source code downloaded using grunt-esri-slurp. The build profile and grunt configuration draw heavily from the AGRC JavaScript Project Boilerplate, which is itself based on the Dojo Boilerplate. However, the configurations in this repo are pared down to demonstrate only what is necessary to create a custom Dojo build of a simple "app" featuring an Esri map (based on the Create a map sample page).

Instructions

You must have Node.js installed as well as the Grunt CLI prior to running the steps below.

Install Grunt tasks with npm:

npm install

Download Dojo and other dependencies with bower:

bower install

Download the AMD build of the ArcGIS API for JavaScript with grunt-esri-slurp:

grunt slurp

To verify that all dependencies are in place, you can serve the unbuilt app with:

grunt connect:src

Then browse to http://localhost:9000/ and verify that it works.

Finally, build the app:

grunt build

To verify that the build was successful, you can serve the built app with:

grunt connect:dist

Then browse to http://localhost:9000/ and verify that it
works. You can inspect the network traffic to verify that the build version of the app requests fewer and smaller scripts (see below).

Comparing the Built App

In order to determine if our build improves the user experience, we need to verify that the built page makes fewer script requests and that the size of the scripts requested is smaller when compared to similar pages that reference the standard and compact CDN hosted builds of the API. The "app" in this example is based on the Search multiple sources sample page, and for convenience, this repo includes a copy of that page as well as a copy that uses the compact build (under the samples folder). I've compiled a comparison of the file requests and sizes between the different builds below.

Page | JS Requests | JS KB (gzipped) | JS KB (uncompressed)
------ | ----------------- | ------------- | --------------- | ---------------
dist/index.html (built app) | 1 | 304 | 792
samples/search_multiplesources_compact.html | 23 | 348 | 850
samples/search_multiplesources.html | 7 | 431 | 1091

However, your mileage may vary and there are many factors to consider when deciding whether or not it is worth while to do a Dojo build. If your code is small and/or does not reference a lot of modules that are not already included in one of the CDN builds, a local build may not help that much. Conversely, when creating applications with many modules, you should see significant improvements over the CDN builds in most cases.

Reducing the Size (on Disk) of Build Output

By default the Dojo build outputs uncompressed versions of the source files as well as source maps to aid in debugging. If you don't need the source maps or uncompressed files (e.g. if you debug using the unbuilt source), then you can save time and space while running the build by uncommenting the following line in app.profile.js:

// useSourceMaps: false

You can further reduce the size of the output directory by 50% or more by running the following grunt commands after the build:

grunt clean:uncompressed
grunt clean:stripped

Resources

Credit

There's nothging new here. The hard work has already been done by the estimable @steveoh and @stdavis. This is just an attempt to make the great work that they've already done a bit more approachable (even though they mock me).