前端的离线处置惩罚

2024年4月5日 217次阅读 来源: 行列

这里的离线处置惩罚指线下把一些事宜提早做好，不在运用运行时再去做

实在前端的离线处置惩罚在一些东西中能够看到，比方说css中的背景图，某些css东西在打包处置惩罚的时刻，假如图片的文件大小比较小，东西会读取文件内容转成base64直接放到css文件内，削减http要求。

相似的另有运用字符串模板的情况下，提早把字符串模板变成js中的函数，防止运行时再去天生响应的函数

接下来聊聊其他的离线处置惩罚

模板的离线处置惩罚

自定义标签

如今许多前端框架支撑自定义标签的誊写体式格局，比方基于vue的element。我们以它的inputnumber为例来看一下： http://element.eleme.io/#/en-US/component/input-number

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

一个自定义的el-input-number标签，终究天生的html是

<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会把自定义标签替换成终究完成的html内容，这个历程是运行时做的。实在这个历程是能够经由过程东西线下处置惩罚好的，没必要在顺序运行时再做。

字符串模板

字符串模板在许多前端页面中可见，模板引擎也许多，以underscore中的template要领为例：https://github.com/jashkenas/underscore/blob/master/underscore.js#L1579，它内里在天生函数时，假如没有variable参数，则会加一个with语句，一般我们是防止掉with的

那末有无什么方法是不必传variable，也不运用with语句呢？这个也是能够线下处置惩罚好的。
比方模板以下

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

经由过程东西我们是很轻易转换成下面的内容的

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

这个就需要借助acorn相似的东西来处置惩罚了，不过肯定是能够做到的。

有的同学说如许做是错的，由于with语句不在运行时，基本不知道它内里的变量从那里取值。是的，不过我们完全能够经由过程商定模板中用到的变量都应该在运用时，显式通报

比方window上有一个getUser()要领
在去掉with前

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

这时候能够一般事变

经由过程离线东西的处置惩罚，去掉with后，模板变成了

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

这时候刻就不行了，不过我们能够商定模板中运用到的都应该在挪用时显式通报，从而防止一些潜伏的题目涌现。

固然，这个模板字符串离线处置惩罚最好的结果是直接就是一个函数放在那里了。

css图片的处置惩罚

在我们的项目中，斟酌以下文件构造

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

我们一般是把html和css打包时，打包到js文件中的，由于js文件能够很轻易的模块化，把html，css依附在js文件上。如许js按需加载时，html和css也按需加载了，而且不需要为它们特别处置惩罚。

假定它们终究打包出来index.js以下

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

更多信息可参考 https://github.com/thx/magix-combine/issues/15这个打包东西。

款式变成一个字符串放在js文件中。

我们看一个事变：在css中运用背景图时，为了到达最好实践，我们愿望在支撑webp后缀的运用webp，在高清屏下运用2倍图等 。假如我们用纯css完成，要写许多media query,发生许多css代码。

实在这个事变我们没方法离线处置惩罚，但我们能够如许做：誊写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')+'}');

如许能够很轻易的处置惩罚掉这些事变。像阿里cdn，七牛云存储等，都有响应的划定规矩天生响应的webp或紧缩图片等功用，所以我们adaptImg要领很轻易完成

同时由于我们运用的是最基本的css功用，所以不存在浏览器不兼容的题目，像css背景图中image-set用来处置惩罚2倍图的计划，在firefox中是不被支撑的。

模板中的图片

如css中的图片处置惩罚一样，我们一样能够用东西离线处置惩罚。经由过程辨认模板中的img标签，再对src属性做处置惩罚即可，如许开辟时只去关注基本功用的完成，别的的适配都应该交由东西去完成，最大化的解放本身。

    原文作者：行列
    原文地址: https://segmentfault.com/a/1190000007521884
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞