zoukankan      html  css  js  c++  java
  • rails 里js 在production 只合并不压缩等问题,以及assets pipeline 加载js 在指定页面上

    因为刚学rails,试着做了一个小系统操作微信公共帐号,

    之后部署的时候遇见了一个问题,整套系统在互联网端访问,非常的慢,而在手机端访问,10s后才会有响应,

    打开chrome的调试工具,发现application-(xxxxdigestxxxxxx).js 这个文件有800多k

    之后打开这个文件发现,里面包含有未压缩的jquery 注释版,以及重控件 ckeditor 的代码

    于是,问题变成了

    1. 如何将jquery 脱水压缩

    2. 只在需要时候再加载其他重控件 比如 ckeditor 的js  (500k)

    关于1, 其实是自己犯的一个错误,  因为我在预编译的时候没有带上production的参数   正确的编译指令是

    rake assets:precompile RAILS_ENV=production

    至于为什么最开始没有这么写?  因为最开始我还是加了这个参数的,但是发现加了的时候终端"卡死"了,于是ctrl+c 停止了执行

    后来发现,其实并不是卡死,而是一些重控件的js比较复杂,node.js 还在运算而已,比如ckeditor 在我的本子上,最后执行precompile需要大概3min的时间

    关于2,我们都知道application.js 是layouts/application.html.erb 里引用的,之后application.js 默认包含了一句话

    //=require tree .     这句话的含义是加目录下所有的js文件

    如果我们要做到分别加载js,首先要干掉这句话

    之后需要在layouts/application.html.erb 里的header预留一个yield位置加载自己在具体指定页面的js

    我是在<%= csrf_meta_tags %> 后面加了个<%= yield :head %>  

    之后再具体的页面上加载具体的js就简单了,在指定的页面中加载对应的js即可  比如这里

    <% content_for :head do%>

      <%= javascript_include_tag "ckeditor_load", "data-turbolinks-track" => true %>

    <% end %>

    当然,你需要在app/assets/javascripts 里写入这个ckeditor_load.js 文件,之后还需要注意的是,需要在config/application.rb 中加入这个precompile 的编译范围

    config.assets.precompile += ['admin.js', 'ckeditor_load.js', 'swfObject.js']

    最后再rake assets:precompile RAILS_ENV=production  

    这样,最终可达到js分类进行加载,并且压缩了js,删除了注释等信息,application.js 从最开始的800k,最后到了一般页面的120k左右,比较科学

    参考文章

    http://guides.rubyonrails.org/asset_pipeline.html

    http://chloerei.com/2013/03/10/rails-assets-pipeline-s-value/

    这里说个小花絮,我在rei 的博客留言之后,rei几乎就立即回复了,后来觉得博主这个头像好面熟,最后想起来了,这家伙是ruby-china 的第一位会员(http://ruby-china.org/rei),顿时吓尿.

  • 相关阅读:
    【BZOJ 1013】 [JSOI2008]球形空间产生器sphere
    【codeforces 779A】Pupils Redistribution
    【codeforces 779B】Weird Rounding
    【codeforces 779C】Dishonest Sellers
    Residential Gateway System for Home Network Service
    互联网大规模数据分析技术(自主模式)第五章 大数据平台与技术 第10讲 大数据处理平台Hadoop
    大数据系统基础(自主模式) 2.1大数据和云计算关系概述
    设计模式(10) 外观模式(FACADE)
    命令模式(Command Pattern)
    设计模式(三)建造者模式Builder(创建型)
  • 原文地址:https://www.cnblogs.com/jicheng1014/p/3522034.html
Copyright © 2011-2022 走看看