Offline processing of front-end

The offline processing here refers to doing some events offline in advance and not doing them while the application is running

In fact, the offline processing of the front-end can be seen in some tools, such as the background image in CSS, and some CSS tools During packaging processing, if the file size of the image is relatively small, the tool will read the file content and convert it into base64 and put it directly into the css file to reduce http requests.

Similarly, when using string templates, turn the string template into a function in js in advance to avoid generating the corresponding function during runtime

Let’s talk about other offline processing

Offline template Handling

Custom tags

Many front-end frameworks now support the way of writing custom tags, such as element based on vue. Let’s take its inputnumber as an example: http://element.eleme.io/#/en-US/component/input-number

<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>

A custom el-input-number tag, the final generated html Yes

<div class="el-input-number">
    <div class="el-input">
        <input type="text" autocomplete="off" class="el-input__inner">
    </div>
    <span class="el-input-number__decrease el-icon-minus is-disabled"></span>
    <span class="el-input-number__increase el-icon-plus"></span></div>

vue will replace the custom tags with the final HTML content. This process is done at runtime. In fact, this process can be handled offline through tools and does not need to be done while the program is running.

String template

String templates can be seen in many front-end pages, and there are many template engines. Take the template method in underscore as an example: https://github.com/jashkenas/underscore/blob/master/underscore.js #L1579, when generating a function, if there is no variable parameter, a with statement will be added. Usually we avoid using it. So is there any way to avoid passing variables and using the with statement? This can also be handled offline. For example, the template is as follows

<%for(var i=0;i<list.length;i++){%>
    <%=list[i].text%><%}%>

We can easily convert it into the following content through tools

<%for(var i=0;i<obj.list.length;i++){%>
    <%=obj.list[i].text%>
<%}%>

This requires the use of tools similar to acorn, but it can definitely be done.

Some students say that this is wrong because the with statement is not running and there is no way to know where the variables in it get their values. Yes, but we can completely agree that all the variables used in the template should be passed explicitly when used

For example, there is a getUser() method on the window before removing the with

var tmpl=&#39;<%=getUser()%>&#39;;
_.template(tmpl,{});

At this time, it can work normally

Pass For offline tool processing, after removing with, the template becomes

var tmpl=&#39;<%=obj.getUser()%>&#39;;
_.template(tmp,{});

. This will no longer work. However, we can agree that everything used in the template should be passed explicitly when calling, thus avoiding some potential problems.

Of course, the best result of offline processing of this template string is to put a function directly there.

Css image processing

In our project, consider the following file structure

|____index.html
|____index.css
|____index.js

We usually package html and css into js files, because js files can be easily modularized. , css is attached to the js file. In this way, when js is loaded on demand, html and css are also loaded on demand, and no special processing is required for them.

Assume that they are finally packaged and the index.js is as follows

var Magix=require('magix');
var indexHTML=&#39;<div class="mp-et5-content">...</div>&#39;;
Magix.applyStyle(&#39;mp-ec5&#39;,&#39;.mp-et5-content{color:red}&#39;);

For more information, please refer to the packaging tool https://github.com/thx/magix-combine/issues/15.

The style is turned into a string and placed in the js file.

Let’s look at one thing: when using background images in CSS, in order to achieve best practices, we hope to use webp when supporting the webp suffix, use 2x images on high-definition screens, etc. If we use pure CSS to implement it, we need to write a lot of media queries and generate CSS code.

其实这个事情我们没办法离线处理，但我们可以这样做：书写css仍然是写最基础的背景图，不去考虑webp，2倍图等事情，也不需要写media query之类的。在打包时，把图片这块调用js函数在运行时动态处理

如前面文件结构中的，假设index.css中使用了一个背景图

.title{background-image:url(//cdn/a.png)}

我们打包到js中时，完全可以变成

var Magix=require('magix');
var ataptImg=function(img){
  //处理webp 2倍图等
  return img
}
Magix.applyStyle('mp-ec5','.mp-et5-title{background-image:url('+adaptImg('//cdn/a.png')+'}');

这样可以很方便的处理掉这些事情。