归零至零 - 第5幕

在这一部分中,我们将仔细研究应用程序的构建配置,并了解它可以为我们做些什么源代码可以在上找到GitHub上

注意:我强烈建议你阅读上一篇文章首先,如果你还没有这样做。


构建配置

项目的构建配置在中定义project.clj它是用Clojure编写的,看起来像这样:

;; project.clj, part 1
(defproject todomvc "0.1.0-SNAPSHOT"

  :jvm-opts ^:replace ["-Xms4g" "-Xmx4g" "-server"]

  :dependencies [[org.clojure/clojure "1.6.0"]
                 [org.clojure/clojurescript "0.0-2280"]
                 [org.clojure/core.async "0.1.267.0-0d7780-alpha"]
                 [secretary "1.2.0"]
                 [om "0.7.1"]]

  :plugins [[lein-cljsbuild "1.0.4-SNAPSHOT"]]

基本上,它只是一个矢量的大地图该依赖从Leiningen自动加载。cljsbuild是一个允许将ClojureScript编译为JavaScript的插件 - 它的配置是:

;; project.clj, part 2
:source-paths ["src"]

:cljsbuild { 
  :builds [{:id "dev"
            :source-paths ["src"]
            :compiler {
              :output-to "app.js"
              :output-dir "out"
              :optimizations :none
              :source-map true}}]})

之前我们已经了解到要构建我们可以使用的应用程序lein cljsbuild曾经开发过该命令启动Leiningen并执行开发建立档案cljsbuild一次如果我们使用汽车相反,它会监视任何更改的源路径并触发构建在开发过程中非常方便。

如果你看看在构建之后项目的根目录中的文件夹,您将看到我们指定的每个依赖项都有一个文件夹在里面你会找到库的源文件,用ClojureScript和JavaScript此外,可以在中找到Google Closure库文件goog目录。

注意:源映射选项告诉插件生成一个<文件名> .js.map每个编译文件的文件这允许浏览器在出现运行时错误时向您显示相应的ClojureScript源代码,而不是难以理解的混乱的JavaScript代码。

出版

有一段时间,您希望发布应用程序并与全世界共享该文件夹大致包含2 MB的JavaScript更不用说它们分散在88个单独的文件中听起来像浏览器基准测试的要求,而不是像可用的Web应用程序!

所以我们需要减少文件数量和总文件大小这就是Google Closure Compiler可以帮助我们的地方您将在下面找到一个名为的新构建配置文件发布这将解决我们所有的问题:

:cljsbuild { 
    :builds [{:id "dev"
                        ...}

                    {:id "release"
                     :source-paths ["src"]
                     :compiler {
                     :output-to "out/app.min.js"
                     :optimizations :advanced
                     :elide-asserts true
                     :pretty-print false
                        :source-map "app.js.map"
                :externs ["src/react-externs.js"]}}]}

与之相反开发它输出一个文件,使用高级优化,删除断言,并不打印JavaScript代码要运行此构建配置文件,我们使用lein cljsbuild一旦发布它比开发配置文件需要更长的时间,但我们只会在实际想要发布应用程序时运行它。

注意:封闭编译器是缩放器中的斗牛犬:非常具有侵略性,无人停下来这就是为什么你需要告诉它不应该使用'externs files'删除哪些代码,例如反应-extern.js在我们的情况下。

下表让您了解不同选项对最终结果的影响它显示了Closure Compiler提供的不同“模式”的文件大小:

模式 尺寸 gzip大小
空白 1343 KB 180 KB
简单 858 KB 119 KB
高级 192 KB 47 KB


与简单模式相比,高级模式将文件大小减少了大约78%Closure Compiler通过进行死代码分析来实现这种缩小:删除应用程序不会使用的JavaScript代码。

因此,我们可以期待的最佳结果是47 KB gzip压缩Sounds reasonable为了比较,没有选项:elide-asserts是真的高级模式的结果增长到195 KB(48 KB gzip压缩)没有设定:漂亮的印刷品它甚至增长到275 KB(53 KB gzip压缩)。

当然,我们遗漏了一件事:React库的足迹缩小版本为123 KB(34 KB gzip压缩)这使得总共81 KB gzip压缩我会让你自己决定这是否可以接受您的app :)


每日提示:Leiningen允许您为单个或多个命令指定别名这样,我们就可以创建一个发布使用发布配置文件运行构建的命令 - 并事先进行清理:

:aliases {
  "publish" ["do" ["cljsbuild" "clean"] ["cljsbuild" "once" "release"]]
}

外表

有一个名为的项目影子构建这允许您将最终的JavaScript文件拆分成多个文件,例如将公共代码(如标准库)放入一个文件中,其余文件放入单独的文件中然后,您可以在应用程序中使用单独的“区域”例如,没有进入管理部分的用户将不需要为其下载源代码目前,将此功能直接应用到ClojureScript中正在讨论中


这就是我们通过建筑设施的旅程最后,我建议瞥一眼cljsbuild样本一旦它记录了ClojureScript插件的所有可能选项。

法案6我们将看看有助于我们创建更好的Om应用程序的库!


评论由Disqus