原来前端工程的编译可以这样优化!

二叶草 2020年2月6日09:13:48优化评论阅读模式

通过对压缩器、打包工具,以及模板引擎处理的讲解,来更深入的理解编译时优化是如何作用的。同时详细介绍了Vue是如何处理编译时优化的。以及未来前端领域在编译时上能做出那些更出色的优化。

 

 

 

前端开发编译现况

 

在一段时间之前前端是没有编译这回事的,大部分人都是打开一个页面就开始写。但是随着前端越来越复杂,开发前端时新增的部分越来越多,NodeJs、Webpack、BABEl等变得必不可少,同时Css也要进行预处理。到了现在编译已经成了前端开发中不可或缺的一环。

 

压缩器

 

编译是一个语言到另一个语言表达的转变,这里面不仅仅是功能上的应用,比如说从ES6转化到ES5,还可以给程序带来性能上的优化。

 

目前所有的编译器都是先将源代码Parser成AST(抽象语法树),然后对AST进行分析,在这个分析过程中进行各种优化。

 

代码压缩其实就是一个构建时优化,我们通常使用的压缩器就相当于编译器,它将原生的代码压缩成更简洁、更轻量的形式。常见的压缩器有Closuer Compiler、UglifyJS、Babili、Butternut。这里面UglifyJS不仅仅是一个压缩器,它自己还实现了一套JS Parser,拥有一套代码生成系统,等于是构建了一个完整的编译工具链。Babili则是基于BABEL的插件实现的。

 

由此我们可以从一直使用的压缩器中感受到编译时优化是怎么样的一个作用过程。

 

Bundlers(打包工具)

 

早先的代码维护是非常不方便的,所以就出现一些打包工具,倡导开发者使用模块,使得代码能够更好的维护。但是另一个问题出现了,打包后代码变得难以压缩。这是因为早期的打包工具每一个模块都是包含在一个函数作用域内的,对于压缩器来说每一个作用域都是分离的,在进行优化的时候很多部分都无法完成。

 

针对上面的问题Rollup这类的工具就诞生了,只要是使用了ES模块,它就可以让所有的模块都放在同一个作用域中,这样压缩器就有用武之地。

 

AOT VS JIT

 

在使用模板引擎的时候,通常都会将模板直接写在JavaScript里面,模板字符串会被编译成JavaScript代码,这个过程一般都是在浏览器上进行的,但是这样就会增加用户的等待时间。

 

其实这个编译的过程完全可以放在构建时进行,由此AOT和JIT出现了。JIT在构建时并不编译而是直接将模板发送到浏览器里,当需要使用的时候再进行编译。AOT则是在构建的时候提前进行编译。

 

Angular、Vue、Glimmer就是一个典型构建时编译的例子,编写的时候是模板而当编译完成后发送出去的却是JavaScript代码。Angular使用AOT达成这一目标,Vue在使用Vue-loader时候默认就是这样执行的。

 

Vue的编译时优化
静态元素

 

原来前端工程的编译可以这样优化!

 

在生成Vue的渲染函数的时候,直接将静态元素存在一个数组里面,然后通过 return this._renderStatic(0) 来永远返回同一个片段,同样也可以跳过比对的过程。

 

原来前端工程的编译可以这样优化!

 

对于Vue的template模板中的静态class,在生成代码中会作为staticClass出现。

 

服务端渲染

 

原来前端工程的编译可以这样优化!

 

在服务端渲染的时候,Virtual DOM是比不上字符串模板的。Vue会分析模板找出可以被拼接成字符串的部分直接进行拼接,而不能拼接的部分还是使用Virtual DOM。这样就可以使服务端渲染获得性能提升。

 

原来前端工程的编译可以这样优化!

 

单页应用的包有时候会很大,整个下载下来的话对用户来说性能上是不友好的。理想情况应该是在访问某个单页应用的时候只下载所访问的页面的JavaScript代码,要实现这样的效果就需要将代码切分成块。

 

Webpack的code-split功能就可以达到这一目标,由此我们就会获得多个javascript文件。由于所有的关联信息都是在main.js里面,只有先加载main.js后才会知道后续要加载是哪个js文件,这就造成了在服务端渲染的时候会有一次额外的加载,并造成延时。

 

在Vue的SSR里面客户端和服务端分别会有一次渲染。在客户端渲染的时候除了生成分割开的代码块之外,还会生成一个信息文件,包含了这次构建的这些模块对应的信息。而服务端的渲染会生成一个Server Bundle.js以及同样的信息文件。这样Vue在build之后就会获得服务端构建和客服端构建的关联信息,通过分析就可以在服务端获得一个请求的时候去计算出客户端应该需要的是哪些文件,而不需要去先加载main.js。

 

原来前端工程的编译可以这样优化!

 

一般来说服务端渲染中Css是需要提前加载的,否则的话页面是没有样式的。但是由于Css的文件较大,提前加载的话用户等待时间就会变长。解决方案就是提前加载一些关键的Css,要达到这一目的就需要在编译时提取这些Css。

 

而在Vue的单文件组件中Style部分会被抽取出来,于生成的JavaScript内是以动态的形式在该组件的生命周期钩子里去进行注入,也就是说在服务端渲染的时候只有用到的组件的Css样式才会被加载。

 

期望实现的想法

 

在编译时分析Vue的所有组件的源码,来找出那些功能没有用到,然后将Vue源码内这些用不到的部分去除掉,这样就可以更进一步的精简代码生成量。

 

 

本文来源于:原来前端工程的编译可以这样优化!-变化吧门户
特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草
nginx解析漏洞 优化

nginx解析漏洞

phpstudy(小皮模板存在nginx解析漏洞) 影响版本 phptsuy8.1.07的Nginx1.5.11版本影响版本 phptsuy8.1.07的Nginx1.5.11版本 phpstudy介...
网站SEO优化基础流程(新手必看) 优化

网站SEO优化基础流程(新手必看)

宝塔面板搭建一个获取网站的Favicon图标的APIgetFavicon是一个可以获取网站的Favicon图标并显示在你的网页上的项目。安装方法很简单,属于开箱即食。这篇文章还是基于宝塔面板来搭建。 ...

发表评论