Open oliver1204 opened 7 years ago
make code smaller
压缩器其实本身也是一个编译器。目前市面的压缩器: uglifyJs、 closure Compiler、babili(基于babel的) 过程: source code - > parser -> AST -> Tagert Code
import { foo } from './foo.js' import { bar } from './bar.js' foo(bar)
export function foo() { }
export const bar = 123
// foo.js function() { //... } // bar.js const bar = 123 // main.js foo(bar)
聪明的压缩器会将不需要的一些函数去掉。
<div> <p class="foo"> {{ msg }} </p> </div>
编译后:
return h('div', [ h( 'p', { staticClass: 'foo'}, [....] ) ])
对于变化的模版
<ul> <li v-for="i in 10> {{ i }} </li> </ul>
return h('ul', [ renderList(10, i => { return h('li', i) }) ])
不得不说virtual Dom 是有好处实在太多,对于手写render function ,对于自定义组件啊, 但是其性能肯定是比不上 直接的字符串拼接,因为它首先创建那么多对象后,再进行stringfy(). 所以ract ssr,它深深的受制于这种over head ,性能方面受到了很大的限制。 首先 vue底层是用了virtual Dom 的,找到所有可以不变的部分写成字符串,但是对于自定义组建使用render function。
在编译的时,首先要加载main.js , 在渲染main.js 后发现需要a.js ,此时再去加载a.js这期间是有等待的,所以vue在进行首屏加载的时候,会有一个 manifist 纪录首屏都需要什么。一次性取得。
基于virtual Dom 进行服务端渲染时,肯定比不上模版语言的,直接字符串拼接的。因为它首先创建那么多对象后,再进行stringfy(). react 服务端渲染受制于这个原因。有一些小众的marko.js他们也做了服务端渲染,并且性能非常好,因为他们限制了只能使用 模版 语言。
css 是在该组建被构建的时候,当他的生命周期的钩子被触发时,加载对应钩子所需要的css.
make code smaller
压缩器其实本身也是一个编译器。目前市面的压缩器: uglifyJs、 closure Compiler、babili(基于babel的) 过程: source code - > parser -> AST -> Tagert Code
main.js
foo.js
bar.js
module scopre hoistion
聪明的压缩器会将不需要的一些函数去掉。
vue 的模版中编译时优化
编译后:
对于变化的模版
编译后:
不得不说virtual Dom 是有好处实在太多,对于手写render function ,对于自定义组件啊, 但是其性能肯定是比不上 直接的字符串拼接,因为它首先创建那么多对象后,再进行stringfy(). 所以ract ssr,它深深的受制于这种over head ,性能方面受到了很大的限制。 首先 vue底层是用了virtual Dom 的,找到所有可以不变的部分写成字符串,但是对于自定义组建使用render function。
在编译的时,首先要加载main.js , 在渲染main.js 后发现需要a.js ,此时再去加载a.js这期间是有等待的,所以vue在进行首屏加载的时候,会有一个 manifist 纪录首屏都需要什么。一次性取得。
基于virtual Dom 进行服务端渲染时,肯定比不上模版语言的,直接字符串拼接的。因为它首先创建那么多对象后,再进行stringfy(). react 服务端渲染受制于这个原因。有一些小众的marko.js他们也做了服务端渲染,并且性能非常好,因为他们限制了只能使用 模版 语言。
css 是在该组建被构建的时候,当他的生命周期的钩子被触发时,加载对应钩子所需要的css.