Preliminary study on 18--assets pipeline

?

And the form of the other pages in the last lesson is also the font red, as follows:

There is a problem, a larger site may need to load a page of coffee files and Scss files will be many, then load the page when the page will continue to send requests to the server to load these front-end files, if many of these files will affect the speed of page rendering. Rails also takes this into account, helping us do a lot of front-end optimizations, using assets pipeline for front-end optimization:

Rails through the assets pipeline all JS and CSS files packed into a file, (packaging is multiple JS and CSS files packaged as a file, which reduces the number of times the browser requests to the server without loading each file to submit a request), (Compression is the automatic removal of extra spaces and the like, the code is still the same, but this also improves efficiency), so that the site can increase the speed of access. and assets pipeline supports front-end languages such as Coffeescript and sass.

About the way assets pipeline works, let's talk about the assets in rails (the static resource structure), where there are three places in rails where you can place a static resource structure.

?

This is what we use, we write the JS and CSS (that is, coffee and scss files) are placed in this assets directory.

?

The assets under Lib is used to place the assets resources used by the plugins we use.

?

is used to place a third-party library, such as the jquery library, which is still empty (we're useless to the third party libraries)

?

By default, the top three folders are common, which is said above because they will eventually be packaged and compressed into a file, we can try:

From the right side know that there are a lot of code, the JS code is very long, this is because all the JS code is packaged into this file. CSS files are the same as crafting a file.

So how does rails know to import all these files together? In fact, it is in the way of declaring:

We can simply understand the following file as a configuration file, it tells the rails which files need to be packed into a file when loading the page, the focus is this last line, it means to put all the files in the JavaScripts folder (3 coffee files, Application.js file is itself), Dot. Represents the current directory.

StyleSheets folder is the same, there are require_tree. Require_self is to include himself in the same.

So what if we just want to include a subset of JS files or CSS files? For example, we also have a Admin.coffee file, which is not used in the front end of the background, then there are two ways:

1: Create a new folder, such as common, and then move the file, such as the last line in the Application.js file instead, it will load the file under the Conmon folder in the current directory, it will not load the Admin.coffee file.

2: The second method is to put the file you do not want to load as follows, then the last line is changed so that it loads the current directory file (does not load subdirectories)

?

Also, what if you want to load the Admin.coffee file under the Common folder on a specific page? First you have to create a configuration file like Application.js under the common folder, such as Application_admin.js, to refer to all the files under the Common folder, which will include all the files under the common folder.

Finally, we need to refer to this folder to add reference code to the page, the Reference keyword is javascript_include_tag (all JS file references are used this keyword),

For example, we came to the layout file of the following view:

Adding the reference code is the following line 7th:

Of course the code should not be added here, but to refer to the background page is only right, we just do an example.

It is also important to note that if you add a application.js that is similar to the one in our case in a place other than Application.js, the Application_ Admin.js such a configuration file, then you must be in your environment configuration file to add your precompiled list otherwise the production environment will be error. (about the build environment, the configuration of the operating environment we'll talk about later).

Here we just need to know to add additional configuration files then be sure to join the precompiled list, otherwise error.

There are also methods in addition to Require_tree. There are require_self or many more.

?

This lesson is about front-end optimization in rails.

?

Preliminary study on 18--assets pipeline