WebAssembly golang 初探

Golang 也能写前端逻辑了?快来试试吧,WebAssembly

WebAssembly go

官方wiki: https://github.com/golang/go/wiki/WebAssembly

golang 版本不能低于 1.11。当然 1.13 及以上最好。

API:https://golang.org/pkg/syscall/js/

快速开始

写个golang 脚本

package main

import "fmt"

func main() {
    fmt.Println("Hello, WebAssembly!")
}

设置GOOS=js和GOARCH=wasm环境变量以编译WebAssembly:

$ GOOS=js GOARCH=wasm go build -o main.wasm

它将生成包并生成一个名为 main.wasm。 wasm文件扩展名将使以后通过HTTP提供正确的Content-Type头更容易。

请注意,您只能编译主包。否则,您将获得无法在WebAssembly中运行的对象文件。如果您有一个可以与WebAssembly一起使用的包,请将其转换为主包并构建一个二进制文件。

执行 main.wasm 在浏览器中,我们还需要一个 JavaScript 支持文件和一个HTML页面来连接所有内容。

$ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

HTML 文件:

<html>
    <head>
        <meta charset="utf-8"/>
        <script src="wasm_exec.js"></script>
        <script>
            const go = new Go();
            WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
                go.run(result.instance);
            });
        </script>
    </head>
    <body></body>
</html>

如果您的浏览器还不支持WebAssembly.InstanceStereaming,可以使用 polyfill

点击查看浏览器兼容性

目前就 IE 不支持吧,其他浏览器基本都支持。

把三个文件放到一边目录里,并在该目录启动一个 http server:

# install goexec: go get -u github.com/shurcooL/goexec
$ goexec 'http.ListenAndServe(`:8080`, http.FileServer(http.Dir(`.`)))'

减少Wasm文件的大小

目前,Go生成大的Wasm文件,最小的可能大小约为2MB。如果你的Go代码导入库,这个文件的大小会急剧增加。10MB+是常见的。

目前有两种主要方法可以减小此文件大小:

手动压缩.wasm文件。

使用 gz 压缩将~2MB(最小文件大小)示例WASM文件减少到 500kB 左右。使用 Zopfli 来执行gzip压缩可能更好,因为它比gzip提供更好的结果——最好,但是运行它确实需要更长的时间。

使用 Brotli 进行压缩,文件大小明显优于Zopfli和gzip——最好,压缩时间也介于两者之间。这台 (new) Brotli compressor 很合理。

来自 @johanbrandhorst 的示例

例子 1

Size Command Compression time
16M (uncompressed size) N/A
2.4M brotli -o test.wasm.br test.wasm 53.6s
3.3M go-zopfli test.wasm 3m 2.6s
3.4M gzip --best test.wasm 2.5s
3.4M gzip test.wasm 0.8s

例子 2

Size Command Compression time
2.3M (uncompressed size) N/A
496K brotli -o main.wasm.br main.wasm 5.7s
640K go-zopfli main.wasm 16.2s
660K gzip --best main.wasm 0.2s
668K gzip main.wasm 0.2s

参考

  • https://blog.alphatr.com/go-write-webassembly.html
  • https://zhuanlan.zhihu.com/p/149266343

发表评论

邮箱地址不会被公开。 必填项已用*标注