Rust Webassembly , React をCDN から読込む構成 #Rust #Webassembly #javascript #React #react-router

knaka Tech-Blog

2020年9月8日 15:26

■ 概要:

Rust Webassembly (下記 wasm) 関係になり。
デプロイした、webpack+ Reactの読込が遅い場合があり、
速度改善が進まない状況で、CDNから Reactを読み込む方法を。試してみました。

■ 前の関連ページ,webpac + React

https://note.com/knaka0209/n/nc7f663d5d6f6

■ 環境

Rust
rustc 1.46.0
cargo 1.46.0
wasm-pack
React 16
react-router 5.0

■ 参考のコード

■　プロジェクト作成、ビルド

cargo generate --git https://github.com/rustwasm/wasm-pack-template

wasm-pack build --target no-modules

■　テスト用の、ファイル

・index.html

react, react-router 等を外部から読込んでおきます。

<!DOCTYPE html>
<html>
<head>
   <meta charset='UTF-8'>
   <script src='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script>
   <script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script>
   <script src='https://unpkg.com/react-router@5.0.0/umd/react-router.min.js'></script>
   <script src='https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js'></script>
   <script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
</head>
<body>
<!-- -->
<script src='./pkg/wasm_cms2.js'></script>

<div id='root'></div>
<script type="text/babel" src="./App.js?a1" ></script>

</body>
</html>

・App.js


const Link = ReactRouterDOM.Link,
   Route = ReactRouterDOM.Route;

async function wasm_react_cms_run() {
   const { greet } = wasm_bindgen;
   await wasm_bindgen('./pkg/wasm_cms2_bg.wasm');
   greet();
};
wasm_react_cms_run();

//
const App = props => (
<ReactRouterDOM.HashRouter>
   <ul>
   <li><Link to="/">TO HOME</Link></li>
   </ul>

   <Route path="/" exact component={Home} />
</ReactRouterDOM.HashRouter>
)
const Home = props => <h1>HOME</h1>

ReactDOM.render(<App />, document.querySelector('#root'));

■ テスト

・ビルドした、 pkg/ を直下に copy

・index.html を開くと、wasm greet()
が実行でき、アラート表示できました。

■ 補足

・前のＣＭＳの、デモページを追加しました。
上記の、CDN版になります。

https://wasm-cms-type5-kuc.netlify.app/

・コードは、こちら

https://github.com/kuc-arc-f/wasm-cms-cdn-type5