Development mode causing sluggish asset compilation

I am facing an issue with a large rails application that has hundreds of coffee script files.

Whenever I make a small change in a coffee script file or switch branches, the entire assets need to be precompiled, causing a significant delay in loading the page:

Started GET "/assets/application.js" for 127.0.0.1 at 2013-01-11 19:39:45 +0100
Compiled sprockets/commonjs.js  (0ms)  (pid 18142)
Compiled jquery.js  (2ms)  (pid 18142)
Compiled jquery_ujs.js  (0ms)  (pid 18142)
Compiled underscore.js  (0ms)  (pid 18142)
Compiled backbone.js  (0ms)  (pid 18142)
Compiled backbone_rails_sync.js  (0ms)  (pid 18142)
Compiled handlebars.runtime.js  (0ms)  (pid 18142)
Compiled moment.js  (0ms)  (pid 18142)
...and so forth

The assets configuration I am using is located in config/development.rb:

# Do not compress assets
config.assets.compress = false

# Expands the lines which load the assets
config.assets.debug = false

Setting config.assets.debug = false results in a long wait time for loading hundreds of js files. My question is, how can I strike a balance? How can I optimize the assets configuration for the development mode of this large application?

javascriptruby-on-railsrubyasset-pipeline

Answer №1

Check out this middleware developed by the Discourse team. It has significantly improved the performance of our Rails 4 application, reducing reload times from a minute to just 5 seconds during development.

Answer №2

Unfortunately, there is no easy solution to this issue. Dealing with long wait times during development can be frustrating.

However, there are some strategies you can employ to ease the pain of waiting for changes to take effect.

You can find helpful tips and recommendations here1 and here2.

  1. Refer to suggestion 2 in here1.
  2. Organize your assets into multiple files to reduce the processing load when changes are made.
  3. Opt for css/js files, which do not require compilation and can save time.
  4. Engage in an interesting activity while waiting for assets to precompile to alleviate the frustration.

Answer №3

Many have emphasized the importance of optimizing your assets to boost compilation speed, including eliminating unnecessary files, importing carefully, and using partials cautiously. However, why would you disable config.assets.debug = false in development mode? This setting causes sprockets to concatenate all files, potentially leading to lengthy compilation times when dealing with a large number of files.

It would be more beneficial to enable config.assets.debug = true instead, allowing assets to be compiled and cached upon the first request. Sprockets also sets a Cache-Control HTTP header to reduce overhead on subsequent requests, triggering a 304 (Not Modified) response from the browser. For more information, refer to the Rails Asset Pipeline documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error code 405 (Method Not Allowed) occurs in Ajax when the action field is empty or identical to the current page

Special thanks to @abc123 for sharing the code below in one of their posts: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <form id="formoid" a ...

javascriptjqueryhtmlajax

Angular Firebase Count of Items in List

My current dilemma revolves around obtaining a count of items within a firebase list. Firebase details: foods randompushid title: apple, comboQuery: apple23523526(userid) Angular Code snippet: this.foods= this.firebaseDB.list(& ...

javascriptangularfirebaseionic-framework

Running concurrent codes is not possible in Node.js serialport

I am attempting to stream data from the MSP432 xds110 in order to display it on my website in real-time. To achieve this, I have opted to utilize the node.js serialport library for data retrieval. You can find more information about serialport here: In m ...

javascriptnode.jsmicrocontrollernode-serialportmsp432

What is the correct way to add a period to the end of a formatted text?

Hello, this marks the beginning of my inquiry. I apologize if it comes across as trivial but I have come across this piece of code: function format(input){ var num = input.value.replace(/\./g,''); if(!isNaN(num)){ num = num.toString ...

javascript

Leaving the pipeline of route-specific middleware in Express/Node.js

My implementation involves a sequence of "route specific middleware" for this particular route: var express = require('express'); var server = express(); var mw1 = function(req, resp, next) { //perform actions if (suc ...

javascriptnode.jsexpressmiddleware

jQuery unable to target Bootstrap button

I've been experiencing some trouble trying to attach a listener to a button I made with Bootstrap. <button type="button" id="buttonone" class="btn btn-default btn-lg good"> <span class="glyphicon glyphicon-minus" aria-hidden="true">< ...

javascriptjqueryhtmlcsstwitter-bootstrap

Duplicate a form based on the selected option

My goal is to duplicate a form based on the numerical value selected from the drop-down menu. You can find the corresponding code in this JSFiddle. Here is the HTML code: <div class="travel_tour-info"> <h3>How many people are you booking for? ...

javascriptjqueryhtml

What could be causing my js.erb file to not function properly?

Here is the code snippet I am working with: file.js.erb alert("Alert"); main.js jQuery.ajaxSetup({ 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} }) jQuery.fn.submitWithAjax = function() { this.submit( ...

ruby-on-railsjquery

Navigate within a div using arrow keys to reposition another div

As a newcomer to JavaScript, I am facing some challenges. My goal is to use arrow keys to move a small div inside a larger div. However, the code below is not functioning as expected. Here is the HTML and CSS: <div id="rectangle"> <div id="s ...

javascript

Customize the position of nodes and their descendants in a d3 tree chart by setting specific x and y coordinates

I am in need of a d3 tree structure that looks like this. https://i.sstatic.net/X6U3u.png There are two key points to understand from the image above: Headers will have multiple parents(wells). I need to be able to drag and drop links connecting w ...

javascripttypescriptd3.jshierarchy

The ID Token could not be verified due to an invalid jwt.split function

I'm currently working on validating a Google ID Token on my Node.js server. Unfortunately, I've encountered the following error: The ID Token cannot be verified: jwt.split is not a function For reference, here is the link to the code that I am ...

javascriptnode.jsidentitygitkit

Adjusting the size of div content without changing its dimensions

I'm in search of a solution for resizing the contents within a fixed width and height div. Currently, my div looks like this: <div id="editor_preview" style="width:360px !important; color:gray; ...

javascriptjquerycsshtml

How to manage a particular process ID in Node.js?

I am currently working on a node application that allows clients to control a program running on the server. The program needs to run in its own terminal window at all times. Here is the ideal scenario: When a client clicks a button, a command is executed ...

javascriptnode.jsprocesschild-processcommand-line-interface

The TypeScript factory design pattern is throwing an error stating that the property does not

While working with TypeScript, I encountered an issue when trying to implement the factory pattern. Specifically, I am unable to access child functions that do not exist in the super class without encountering a compiler error. Here is the structure of my ...

javascriptinheritancetypescriptabstract-classfactory-pattern

Should I use jQuery's .on() method or plain JavaScript function()?

I am currently working on pages that are constructed using ajax calls to the server, which means I am using .on() to attach event handlers to new items. However, I am curious whether it would be more effective to use the traditional javascript:function() ...

javascriptjqueryajax

How does React determine if a component is a class component or a functional component?

Within my React application, I have successfully developed both a class component and a functional component. However, I am curious about how React is able to distinguish between the two when calling them. Can you shed some light on this distinction? This ...

javascriptreactjsclasscomponents

Execute the knockout function using jQuery

There's a scenario where I am trying to trigger a knockout method using jQuery. The Knockout viewModel has already been bound, but I'm unsure of how to call it using jQuery. Below is the snippet of my code: $(document).ready() { form_submit( ...

javascriptjqueryajaxknockout.js

The issue persists where Chrome WebAPI's chrome.webRequest.onBeforeSendHeaders is failing to modify the parameters in the outbound requests

I have been attempting to include an IP address in the X-Forwarded-For parameter within the requestHeader, but my code does not seem to be working based on the examples provided in the Chrome API. Below is the code snippet I am currently using: var reque ...

javascriptgoogle-chromegoogle-chrome-extension

Navigating through an EncryptedDataBagItem within a Chef Recipe

Is there a way to decrypt a chef data bag item called passwords, extract all its attributes, and then save them in a temporary JSON file that can be read by a node.js app before being deleted? How can I iterate over the attributes of the data bag item to r ...

rubyjsonchef-infradevops

Thumbnail Option in the WordPress Media Uploader

Is it possible to add support for selecting image size (thumbnails) in the Media Library popup created using the wp.media() function in WordPress? I am currently using WordPress 4.5.2 and my code sample is as follows: wp.media.frames.selectFile=wp.media( ...

javascriptjquerywordpress