What is the proper way to link big template assets into rails erb files?

Question

I am developing a rails application starting from webarch template. I know that adding the whole assets folder in the public/ folder will link the assets with my views, but it would not be taking advantage of the assets pipeline functions. The template has a lot of plugins and different options and one generally does not use all of it. The assets folder's size is 30MB.

I though about putting it inside vendor/assets and using it with the asset pipeline but this generates two problems:

1. I would be serving 30MB of minified code and using a small percentage of it in my app.
2. I would have to manually rewrite the whole assets folder to use links the way asset pipeline wants it (javascript_include_tag "file" to serve file.js). Of course, I would do this via a script but it still seems like a problem someone should have encountered first.

Since neither vendor/assets and public/ folders seem to be a proper location for these files I would like a better option (or a way to make the later options work better).

Answer 1

A solution to keep your files under asset pipeline when they are too big to reasonably be left in one single minimified asset file is to split your assets by categories, compile those categories in different minimified files, and include them in your views when needed.

I do it for an app that contains several "heavy" javascripts components that are located in different area of my app and are not often used.

1- Organize your file structure

In app/assets/javascrips and app/assets/stylesheets create one directory per category we are going to create. Examples:

• app/assets/javascrips/common
• app/assets/javascrips/admin
• app/assets/javascrips/user_account

2- Create your manifests

In app/assets/javascrips and app/assets/stylesheets create one manifest file per category and have them included the related directory

File app/assets/javascrips/common.js

//= require jquery
//= require_tree ./common

File app/assets/javascrips/admin.js

//= require_tree ./admin

File app/assets/javascrips/user_account.js

//= require_tree ./user_account

3- Add your manifests to rails precompile list

You can do it in config/application.rb file, but when it gets big it is preferable to create an initializer file config/initializers/assets.rb

Rails.application.configure do
  config.assets.precompile += %w[common.js admin.js user_account.js]
end

4- Include them in your views and layouts, and set-up your javascript libraries.

Import the assets files into layouts and views. It can be a good idea to create several layouts for different area of your application that would be using common assets files. The methods to use are stylesheet_link_tag 'manifest_file' and javascript_include_tag 'manifest_file'

And keep in mind you may have to tell your javascript plug-ins they need to use the miniminied file when dynamically loading files. For them you can use a configuration .js.erb file. Example:

File app/assets/javascrips/admin/plug-in_config.js.erb

PLUGIN.config('dynamicFileName', '<%= javascript_path('manifest_file') %>');