| 1 | # HTML注入
|
| 2 |
|
| 3 | HTML注入主要是只在SSR阶段，根据HTTP请求，动态的向```HTML模板```里插入代码。
|
| 4 |
|
| 5 | ### HTML模板
|
| 6 |
|
| 7 | 默认情况，模板文件在 ```/src/html.js```。
|
| 8 | 如下：
|
| 9 | ```js
|
| 10 | export default `
|
| 11 | <!DOCTYPE html>
|
| 12 | <html>
|
| 13 | <head>
|
| 14 | <meta charset="UTF-8">
|
| 15 | <title><script>//inject_title</script></title>
|
| 16 | <script>//inject_metas</script>
|
| 17 | <script>//inject_css</script>
|
| 18 | <script>//inject_style</script>
|
| 19 | </head>
|
| 20 | <body>
|
| 21 | <div id="boat-loader">LOADING...</div>
|
| 22 | <div id="root"><script>//inject_react</script></div>
|
| 23 | <script>//inject_redux</script>
|
| 24 | <script>//inject_js</script>
|
| 25 | </body>
|
| 26 | </html>
|
| 27 | `
|
| 28 |
|
| 29 | ```
|
| 30 |
|
| 31 | ### 注入变量
|
| 32 |
|
| 33 | 从上面的```HTML模板```里可以看见很多个```<script>//inject_[*]</script>```标签，这样的标签会在```SSR```阶段被动态替换成配置文件里的对应代码。
|
| 34 | 配置文件: ```/super.js```中，```export const server = { inject }```的```inject```会指定对应关系所在的文件。
|
| 35 |
|
| 36 | 默认配置是：
|
| 37 | ```js
|
| 38 | // File: /super.js
|
| 39 |
|
| 40 | export const server = {
|
| 41 | inject: require('./src/server/lifecycle/inject').default
|
| 42 | }
|
| 43 | ```
|
| 44 |
|
| 45 | ```js
|
| 46 | // File: /src/server/lifecycle/inject.js
|
| 47 |
|
| 48 | import getClientFilePath from 'super-project/utils/get-client-file-path'
|
| 49 | export default {
|
| 50 | js: [getClientFilePath('client.js')], // 对应标签 <script>//inject_js</script>
|
| 51 | // css: [...],
|
| 52 | // ...
|
| 53 | // 可自行扩展
|
| 54 | }
|
| 55 | ```
|
| 56 | 默认打包方式会把打包后的文件加上```[hash]```值，所以```Super.js```框架提供了找到被 hash 后新文件名的方法。
|
| 57 |
|
| 58 | 如：```getClientFilePath('client.js')``` => ```client.8f0f500307dec12480a2.js```
|
| 59 |
|
| 60 |
|
| 61 | ### 注入时机
|
| 62 |
|
| 63 | 注入到HTML模板的代码可能是每个页面都需要的，也可能是在特定页面才需要的，所以为了减少字符串匹配的性能消耗，我们把每个页面都需要的注入标签在服务端程序启动时就替换好，有特定需求的会在页面被渲染时候才注入。
|
| 64 |
|
| 65 | 注入变量 | 时机 | 必填 | 说明
|
| 66 | - | - | -
|
| 67 | js | 服务端启动 | 是 |一般是 client.js
|
| 68 | css | 服务端启动 | 否 | 可选，可自定义浏览器预加载的 CSS
|
| 69 | title | 页面渲染 | 否 | 页面标题
|
| 70 | metas | 页面渲染 | 否 | <meta> 标签
|
| 71 | redux | 页面渲染 | 是 | 服务端准备好的 redux store
|
| 72 | react | 页面渲染 | 是 | React 在服务端渲染好的 HTML 代码
|
| 73 | style | 页面渲染 | 是 | React 在服务端渲染好的 CSS 代码
|
| 74 | |
| \ | No newline at end of file |