谈谈魔法消失UI框架 Svelte

最近基于公司业务需求，可能会要开发一款浏览器插件，调查后发现插件UI开发本质上就是开发页面。于是我便开始寻找一个非常小又非常快的新玩具(工具)。毕竟前端 3 大框架无论哪一个去开发浏览器插件都无异于大炮打蚊子。至于开发效率极低的 Dom 操作我也不想去碰了。于是我就找到了这个已经在国外非常火热的魔法消失 UI 框架 —— Svelte。

Svelte是什么

Svelte 是一个编译型的前端组件框架。该框架没有使用虚拟 dom，而是通过编译在应用状态发生改变时提供异步响应。

编译型框架

任何前端框架都是有运行时的，(以 Vue 为例) 该框架至少需要在浏览器携带虚拟dom 以及 diff 算法。如果在页面中直接引入 Vue 脚本，还需要追加 Vue 前端编译器代码。可以参考Vue 对不同构建版本的解释。

Svelte 则不同，它从开始就决定把其他框架在浏览器所完成的大部分工作转换到构建中的编译步骤,以便于减少应用代码量。它通过静态分析来做到按需提供功能(完全不需要引入)，同时它也可以分析得出根据你当前的修改精准更新 dom的代码来提升性能。

我们以最简单的代码为例子。

// App.svelte
Hello world!

// main.js
import App from './App.svelte';

const app = new App({
	target: document.body
});

export default app;

实际上开发版会被编译为(为了简化，只分析部分,不分析全部代码)

// IIFE 立即执行函数表达式
var app = (function () {
  'use strict';
  // 空函数，用于某些需要提供函数的代码
  function noop() { }  
  // 当前 元素所在的行 列 前面有多少字符等信息，开发版存在
  function add_location(element, 
                        file, 
                        line, 
                        column, 
                        char) {
    element.__svelte_meta = {
      loc: { file, line, column, char }
     };
  }
  //   
  // 操作dom辅助函数,减少代码量...(相当于运行时)  
  function insert(target, node, anchor) {
    target.insertBefore(node, anchor || null);
  }
  function detach(node) {
    node.parentNode.removeChild(node);
  }
  function element(name) {
    return