简介

vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具，他基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。它具有以下特点：

1. 快速的冷启动
2. 即时的模块热更新
3. 真正的按需编译

原理

在过去的 Webpack、Rollup 等构建工具的时代，我们所写的代码一般都是基于 ES Module 规范，在文件之间通过 import 和 export 形成一个很大的依赖图。

这些构建工具在本地开发调试的时候，也都会提前把你的模块先打包成浏览器可读取的 js bundle，虽然有诸如路由懒加载等优化手段，但懒加载并不代表懒构建，Webpack 还是需要把你的异步路由用到的模块提前构建好。

当你的项目越来越大的时候，启动也难免变的越来越慢，甚至可能达到分钟级别。而 HMR 热更新也会达到好几秒的耗时。

Parcel

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。

rollup

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

esbuild

毫不奇怪，大多数JavaScript构建工具都是用JavaScript编写的。速度通常是可以接受的，但是编译后的应用程序总是会更快。 esbuild是另一个JavaScript模块捆绑器，但是它是用Go编写的。它声称是：

1. 比Rollup.js快100倍
2. 比Webpack 5快173倍
3. 比(Parcel(v2))[https://v2.parceljs.org/] 快294倍

esbuild在没有高速缓存的情况下达到了这种速度，它仍然支持ES6模块，CommonJS模块，TypeScript，JSX，摇树，源映射，压缩，插件，Node.js捆绑，完整的API等。

lerna

Lerna 是一种工具，针对 使用 git 和 npm 管理多软件包代码仓库的工作流程进行优化

WebAssembly动态内存分配

WebAssembly中的内存管理：C和Rust指南，动态内存分配是指通过一组C语言以C编程语言对动态内存分配执行手动内存管理。对于WebAssembly中动态内存分配的简单示例，让我们考虑一下记录数据类型，该数据类型具有与之关联的任意字段。例如，说一个ID，一个X和一个Y值。为了动态创建这些记录之一，我们将使用createRecord函数，该函数将其字段作为其参数。

WebAssembly和动态内存，我们演示了如何构建依赖于malloc的WebAssembly模块，在运行时链接到预构建的malloc实现中，使用JS绑定技巧来使WebAssembly模块不了解有关对象大小的任何线索在内存中创建。WebAssembly需要分配内存。我们必须手动编写内存的分配和释放。在此步骤中，我们发送数组的长度并分配该内存。这将为我们提供一个指向内存位置的指针。

使用中的Malloc在WebAssembly中分配动态内存，了解WebAssembly的内存模型在反向功能中将很重要，最初，此堆已用输入数组填充。WebAssembly线性内存对象的大小以页为单位。每页为65536（2 ^ 16）字节。在WebAssembly版本1中，线性内存最多可以有65536页，总共2 ^ 32字节（4吉字节）。除了该页数限制，当前所有内存指令都将i32类型用作内存索引。

web worker 实践

介绍

通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢，从页实现多线程。

主线程 => 创建 worker (new Worker(同源js链接)) -> 发送通知postMessage -> 接收通知onmessage -> 关闭close

worker线程 => 程序逻辑 -> 接收命令onmessage -> 处理数据 -> 发送通知postMessage -> 关闭terminate

不可使用点

1. 与主线程不在同一个上下文
2. 不可以操作 DOM，一切与 DOM 操作相关的函数、类都不能使用
3. window 对象的某些属性和方法, 重点注意 XMLHttpRequest 只会返回 null

   Web Workers可以使用的函数和类

Blob 使用

学习参考：动态创建 Web Worker 实践指南

Web Worker 常用构造函数来加载 js 链接文件，而我们知道：

1. Blob对象是一个不可变、原始数据的类文件对象，但不局限于 JavaScript 原生格式的数据，常被用来存储体量很大的二进制编码格式的数据，因此我们可以存入 worker.js 的逻辑代码。
2. URL.createObjectURL 则可以创建链接。

strapi 是一套用于图形化构建和管理后端数据的平台，同时也是基于前端技术的内容管理工具CMS，可以实现RESTful和GraphQL无缝接入。
下面就是我的新手引导的记录。

安装

按照官方说明，使用下列命令：

1

yarn create strapi-app <project-name>

会有两种安装方式：快速和自定义，其实就是数据库的选择。在这里我使用mysql配置下来（注意使用数据库mysql时，要求5.7及以上版本才行），安装依赖结束后启动。

1

yarn develop

即可。

按照官方的新手引导即可完成内容的类型创建和添加。

认识 Shadow DOM

什么是 Shadow DOM

Shadow DOM 是 Web Components 定义的四大标准之一(Custom elements, Shadow DOM, HTML templates 和 HTML Imports)。

Shadow DOM是一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。这直接解决了HTML、CSS 和 JS 的全局性污染的问题。

Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。
详细说明

本方从开发工具，前端框架和打包流程来实践开发PWA的过程。

准备工作

环境工具

由于 pwa 站点的Service Worker要求https，以及一些推荐性工具，下面一一列出来:

1. mkcert https证书
2. pwa-cli 现成的初始化开发环境

开发思路

1. pwa是类APP的页面，需要具备响应性，推荐使用 hotcss

“巨硬”的windows10其实已经是个非常实用和开发友好的系统平台了，在这里我记录下平常使用到的一些应用软件和开发工具，在Surface Pro6的使用下完善工作和学习生活的需求。

终端篇

终端工具

• PowerShell 其实是很强大的，在支持插件策略之后可以到 powershellgallery 安装一些非常实用的插件如下，在powershll内打开配置文件 notepad $PROFILE

  • posh-git
  • oh-my-posh
  • Get-ChildItemColor
  • 推荐文章 PowerShell 的外观 和 PowerShell优化

• WSL(Linux 的Windows 子系统), 推荐选择 Ubuntu 或 Debian

• 终端工具

  • ConEmu
  • FluentTerminal 基于uwp开发
  • terminus 基于Hyper的终端(支持ssh)
  • hyper 更漂亮的终端

终端命令

• scoop 更好的包安装工具,推荐安装curl, openssh, ripgrep, fzf, ctags等，使用全局安装scoop install -g, 可选添加 -a 32bit(64bit)选择平台版本
• z.lua 基于Lua的快速路径切换工具

桌面软件

• VSCode 最硬的IDE，相应我的插件表单
• SimpleRemote 轻量级、选项卡式、免费、开源的远程连接管理工具
• uTools 极简、插件化、跨平台的启动工具，同类有 wox
• SwitchHosts! host切换管理工具
• Snipaste 截图+贴图工具
• 快贴 全平台复制粘贴同步工具
• Everything 文件搜索工具
• QuickLook 文件预览工具
• phpstudy php + nginx + apache + mysql 集成管理工具
• 坚果云 文件同步
• PicGo 图库上传工具
• Fiddler 网络抓包工具
• 123看图器
• FileZilla
• Proxifier 系统代理配置工具
• Virgo 虚拟桌面切换工具

前端nodejs开发平台

安装nodejs开发环境

1
2

// 安装`npm`淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装git工具

前端模块

• cnpm
• node-tinypng
  • usage: tinypng *.png(or folder)
• json-server
  • usage: 快速构建 REST API 本地服务
• bower
• babel-cli
  • usage: babel example.js -o compiled.js
• phantomjs
• typescript , ts-node 与 typings
  • usage: tsc file.ts
• react-native
• React UI构建工具 react-storybook
  • usage: npm i -g getstorybook
• pm2 node应用进程管理工具
• spy-debugger
• gulp
• create-react-app
• create-react-native-app
• dawn
  • 阿里前端构建和工程化工具
• prepack
  • usage: prepack script.js
• jsmonkey
• stylus
  • usage: stylus -w style.styl -o style.css
• less
  • usage: lessc styles.less > styles.css
• serve
  • usage: Yarn 推荐本地静态服务
• serve-here
  • usage: here [-p 8888][-S][here -d directory][-w 3]
• pushstate-server
  • usage: pushstate-server [directory] [port]
• yarn
  • usage: 设置国内镜像 yarn config set registry https://registry.npm.taobao.org
• pnpm
• npm-home
• apollo-client 面向UI框架的GraphQL客户端
• nodemon
  • usage: npm install -g nodemon
• webpack
• koa-generator
  • usage: (koa教程)(http://17koa.com/koa-generator-examples/koa-generator/install.html)
• postcss-cli
• autoprefixer
  • usage: postcss --use autoprefixer *.css -d build/
• npm-check
• gatsby
• requirejs (r.js)
• browserify
• express
• fkill-cli
• parcel
• n
• nrm npm源快速切换

常用JS框架

wsl 使用记录

1. wsl 终端代理 export http_proxy=http://localhost:8123, 教程为 polipo 代理
2. git 平台不同时的换行符问题，可在windows平台同时执行 git config --global core.autocrlf true, 而在其他平台 git config --global core.autocrlf input, 相关阅读
3. 默认终端字体使用 DejaVu Sans Mono for Powerline
4. 安装oh-my-zsh 和 推荐插件

记录在学习和使用Vue下遇到的一些问题

遇到的bugs

1. v-html 内的文档结构不能使用自闭包的标签，如 <i />, 必须是 <i></i> 这样的结构，不然会出现渲染bug导致标签不匹配
2. Nuxt中的配置样式会全局导入，每个页面都会得复加载

TypeScript快速上手, 深入请看 深入理解 TypeScript

上手工具

工欲善其事必先利其器

1. 微软大杀器 VSCode
2. Node环境
3. Node环境模块: TypeScript, Ts-lint 和 ts-node，快速安装

   npm install -g typescript tslint ts-node

4. VSCode 插件：TSLint, Code Runner, TypeScript Hero, TypeScript Toolbox
5. 快速码字

   tsc –init
   tslint –init
   parcel 快速开发
   create-react-app new-app –scripts-version=react-scripts-ts
   声明全局 global.d.ts

6. 使用ts来开发lib，推荐 tsxd

使用技巧

1. 借助 VSCode 可以适当改下 tslint 规则
2. window 的全局方法要合理判断，如 XMLHttpRequest 方法需要 if ((window as any).XMLHttpRequest), 因为IE下是 ActiveXObject