element-ui使用 rust wasm

趁着没有忘记,赶快记录下来。

前两天试了下wasm,刚开始使用golang随便写了个,直接html加载没有问题, 但golang的版本太大了。 tinygo的版本库支持有问题。正好最近在看rust的编程。就试试rust吧。

我项目使用的是element-ui, 无它,关键是懒。里面的很多数据处理部分,vue的尿性,造成json所占的 内存过大,动不动就要500MB甚至上G的内存都很正常,没办法,我一个json原始的数据结构都要50多MB了。

目的是为了解决内存以及效率。所以试试wasm吧

首先遇到的坑:

  1. rust的编译要用下面的方式:

    wasm-pack build
    

    也就是没人的target参数为bundler的方式, 试对这一步就已经成功了一半了。我不知道其他的为啥和 element-ui有冲突,反正这个可以了。其他的我除非使用原始的html的script type=”module”去加载 等等,否则不可以

  2. 引入方式的修改 我不知道做成npm发布包会如何,我更喜欢直接copy文件夹的形式,因为我的前端和rust等各部分都是分别 在不同的docker中进行开发的,但如果import编译出来的wasm.js文件的话,会报后面提到的错误。 因此需要新建一个文件(这里是index.js),内容很简单:

    export default import('./pkg/wasm.js');
    

    引用及测试:

    import wasm from './wasm/index.js';
    (async _ => {
      const module = await wasm;         //引入wasm对象
      module.greet("aaaaaa");
    })();
    

    上面用的是rust的那个helloworld的,也是默认生成的模板代码

  3. vue.config.js的修改 碰到以下的错误:

    WebAssembly module is included in initial chunk.
    This is not allowed, because WebAssembly download and compilation must happen asynchronous.
    Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:
    

    对于element-ui而言,需要在js的处理里面屏蔽掉生成的代码, vue.config.js 中chainWebpack部分添加 以下代码:

    config.module
          .rule('js')
          .exclude.add(resolve('src/wasm'))
          .end()
    
  4. 如果像我一样,使用docker部署的话,开发模式也是在docker里面的话,重启开发模式,否则vue.config.js不生效

发表评论

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据