新手问题 js 太多,按需加载大家怎么处理

as181920 · 2013年07月19日 · 最后由 jamchange 回复于 2013年07月23日 · 9620 次阅读

功能累加的时候,js 也一点点累加。 刚开始 jquery 不小了,加了个 jquery-ui,自己写的 js 量不大;

然后富文本加了 kindeditor,图表加了 high chart;然后 jq-upload;bootstrap 等

按照默认方式最简单可以在 application.js 里面 require a,require b

问题这样打包出来最后的 js 会很大,而大部分页面是不需要 kindeditor/high chart 这些大库的。

大家一般是怎么处理的。

http://guides.rubyonrails.org/asset_pipeline.html#controller-specific-assets

You can also opt to include controller specific stylesheets and JavaScript files only in their respective controllers using the following: <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>. Ensure that you are not using the require_tree directive though, as this will result in your assets being included more than once.

#1 楼 @blacktulip 你不觉得根本没解决问题 吗,只是合并成一个请求了,没按按需加载来

lz 推荐你看看 RequireJS, 或国产的 seajs

#2 楼 @hhuai 一个 controller 里面需要的 js 只在这个 controller 里面加载,为啥不是按需加载?

#3 楼 @blacktulip 一样的有问题,就比如 jquery 也不是每个 controller 都要,但一般会包在 application 中

你可以看下这个链接 http://ruby-china.org/wiki 的源码里的 js 包含

#4 楼 @hhuai 只要你愿意 jQuery 一样可以这样处理吧

#4 楼 @hhuai 那么 application.js 里面不加载 jquery,在每个独立的.js 里面加载。

前端加载器为了加速最后也会用服务端打包。

rails 默认是打包成一个 js 的,还需要指定编译单独的一个个 controller js 文件吧。

#6 楼 @Rei 这样处理又有依赖问题了,到底哪一个页面需要 jquery,哪些又不需要,还是将其丢在全局呢。requirejs 就刚好解决这些问题

#8 楼 @hhuai

requirejs

require(['jquery'], function($) {
  // code
});

assets_pipeline

//= require 'jquery'
// code

我不明白有什么不同。

#9 楼 @Rei assets_pipeline 是静态的,只能打包前把所有可能的依赖都写进去。 requirejs 动态的,可以在执行时判断要用哪个再加载。

#10 楼 @hhuai 我没这个需求……

随便搜个例,比如

//init.js
$("#J_PicCover").click(function(){
    require.async('module/highlight', function(){
        $(".buy-info").highlight({color:'#ffe5c4',speed:500,complete:function(){
        },iterator:'sinusoidal'});
    });
});

这东东就做这用,有人用得好,http://www.angularjs.cn/

#12 楼 @hhuai 与其点击之后还要等待库下载才执行,我还不如预先载入了。

#13 楼 @Rei 那就看需求来呗,这只是个例子,如果进个页面只有 10% 的可能做这个操作,那 90% 的人不就赚到。

在 application.js 中不加载全部的 js

//= require_directory .

加载 js

<%= javascript_include_tag "application" %>
<%= yield :js %>

在需要的页面再加载

<%= content_for :js do %>
  <%= javascript_include_tag "site/wice_grid" %>
<% end %>

#15 楼 @tuliang 多谢,这是我想要的,这个方法不错。

匿名 #17 2013年07月23日

来打酱油:Package.js https://code.google.com/p/package-js/

需要 登录 后方可回复, 如果你还没有账号请 注册新账号