SVELTE + VITE (一)
Svelte 是一種全新的構建用戶界面的方法。傳統框架如 React 和 Vue 在瀏覽器中需要做大量的工作，而 Svelte 將這些工作放到構建應用程序的編譯階段來處理。
與使用虛擬（virtual）DOM 差異對比不同。Svelte 編寫的代碼在應用程序的狀態更改時就能像做外科手術一樣更新 DOM。
搭建項目
npm init vite
選擇 svelte-ts 模板
初始化后目錄結構如下
- svelte 的構建工具，官方提供了針對 Rollup 和 webpack 的插件
- rollup-plugin-svelte
- svelte-loader
- 這里使用基於rollup 打包原理 的 Vite 工具。
SVELTE特點
- 減少代碼量
- 無虛擬DOM
- 真正的反應能力
測試初始化項目打包體積：
- 圖中可以看出 js gzip 后 3kb
打包體積：
針對初始化項目進行打包：
簡介
添加數據
<script>
let name = 'world'
</script>
<h1>
Hello {name} !
</h1>
- 花括號內，可以防止任何想要的JavaScript代碼
動態屬性
<img {src} alt/>
<!--
or <img src={src} alt=""/>
-->
- 可以在屬性內部使用花括號
CSS樣式
<style>
p{ color:red }
</style>
<p>
This is a ...
</p>
- 這些 CSS樣式的規則的
作用域被限定在當前組件。
嵌套組件
<script>
import Nested from './Nested.svelte';
</script>
<Nested />
<!-- <Nested ></Nested> -->
- 組件名稱Nested的首字母大寫。 采用此約定使我們能夠區分用戶自定義組件 和 一般HTML標簽
HTML 標簽
<p> {@html string} </p>
- 將表達式的輸入插入到DOM之前，Svelte不會對 {@html ...}內的表達式的輸出做任何清理的。換言之，如果使用此功能，必須手動轉義來自不信任源的HTML 代碼，預防XSS攻擊。
創建一個應用程序
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
answer: 42
}
});
賦值
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
（...待續）