前言
相信大家都遇到过这么个场景，就是某些script代码需要在业务代码执行之前执行
通俗来说，就是在框架 如 ReactDOM.render，或者 Vue.mount 之前执行一些script代码
解决方案
看到这里的你会觉得：这个问题很好解决，不就是把script标签放在header上吗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>这里写一些代码，比如设置html字体大小</script>
</head>
<body>
<script src="/src/main.ts"></script>
</body>
</html>
可是在typescript大行其道的时代，硬写js并不是一个稳健的选择。
在vite中，我们可以写typescript脚本，直接放在html中即可。因为vite会从index.html作为入口打包，所以html中的ts也会被构建打包。
很简单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
+ <script src="/some-scripts/hello-world.ts"></script>
</head>
<body>
<script src="/src/main.ts"></script>
</body>
</html>
当vite解析到 /some-scripts/hello-world.ts 这个脚本时，会自然经过vite的处理，即使代码中包含了三方库，也会被vite通通处理
hello-world.ts
console.log('hello world!')
console.log(import.meta.env, 'import.meta.env')
vite 运行起来看看打印结果：
而这些代码，是在我们的App被挂载之前执行的，这样做的意义是什么呢？
假设你的网页需要做rem适配，如果在 useEffect 中设置字体，在进入页面的一瞬间，网页字体是原始的 16px ，而在DOM挂载后，才设置html字体大小，导致网页短暂的变形（如果网页原始字体跟当前页面分辨率应该展示的字体不同的情况下）
打包
可以看到，执行顺序也是ok的
但是打包后，在没有手动拆包的情况下，代码都打到一起去了
一般来说，需要提前执行的代码，几乎不会有变动，所以我们最好是手动拆包，这样有利于缓存
// https://vitejs.dev/config/
export default defineConfig(() => ({
define: {
custom_define: JSON.stringify('custom define!'),
hello_world: JSON.stringify({ hello: 'world' }),
},
build: {
rollupOptions: {
output: {
manualChunks: (id) => {
if (id.includes('some-scripts/hello-world.ts')) {
return 'hello-world'
}
},
},
},
},
}))
然后重新打包，看看结果：
然后 vite preview 看看效果（这是打包后的效果）：
看到这里你可能会疑惑，index.html中明明是 index.js 在 hello-world.js 之前，打印顺序怎么还是hello-word先执行呢？
因为 index 中引入了 hello-world，而 link modulepreload 是告诉浏览器，预加载一个 JavaScript 模块，但并不执行它。
兼容性处理
正式构建时，我们通常需要做代码兼容，在vite中，我们使用 @vitejs/pliugin-leagcy 做传统浏览器兼容，关于这个vite插件，不了解的同学可以看我的另一篇文章
在这里，我们直接引入legacy插件，看看效果即可
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig(() => ({
define: {
custom_define: JSON.stringify('custom define!'),
hello_world: JSON.stringify({ hello: 'world' }),
},
build: {
rollupOptions: {
output: {
manualChunks: (id) => {
if (id.includes('some-scripts/hello-world.ts')) {
return 'hello-world'
}
},
},
},
},
// 使用legacy插件做传统浏览器兼容
plugins: [legacy()],
}))
打包后可以看到 hello-world 也打了一个legacy包，完全OK！
小总结
至此，我们对目前普遍的 spa vite项目做了一遍处理，那对于ssr项目，又该如何处理呢？
SSR服务端渲染处理
SSR项目目前主要有两种形式：
- 动态返回html字符串或stream流
- 根据html文件解析后返回
普遍来说，SSR框架都是第一种形式，比如Astro，Nuxt，
上文说的解决方案处理第二种情况，我们先抛开SSR框架，用原生的vite来做SSR，看看结果如何
我们先用模板命令生成一个vite SSR项目
pnpm create vite-extra
这里我选择纯原生的，能最大程度简化教程的复杂度
生成好了之后，我们直接往index.html添加typescript文件，试试能否生效：
老套路了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ssr</title>
<script type="module" src="/some-scripts/hello-world.ts"></script>
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/src/entry-client.tsx"></script>
</body>
</html>
开发环境
启动！查看浏览器打印台，没问题！
生产环境
打包后预览再看看效果：
也没问题！
分包
同样的，我们也分包，做好缓存效果
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: (id) => {
if (id.includes('some-scripts/hello-world.ts')) {
return 'hello-world'
}
},
},
},
},
})
构建之后，可以看到分包成功了
兼容性处理
引入 @vitejs/plugin-legacy插件，打包。看看结果：
ok，构建后运行也没问题
SSR框架
SSR框架通常是没有html文件的，都是动态返回html字符串或者string，这种情况下，我们无法从html入口下手
推荐使用 vite-plugin-public-typescript
使用方式：
import { defineConfig } from 'vite'
import { injectScripts, publicTypescript } from 'vite-plugin-public-typescript'
// https://vitejs.dev/config/
export default defineConfig(() => ({
define: {
custom_define: JSON.stringify('custom define!'),
hello_world: JSON.stringify({ hello: 'world' }),
},
plugins: [
publicTypescript({
destination: 'file',
}),
],
}))
这个插件会默认读取根目录下的 public-typescript文件目录，然后解析所有的typescript文件，并构建成js。
有两种方式引用ts文件
其一是在vite配置中
import { defineConfig } from 'vite'
import { injectScripts, publicTypescript } from 'vite-plugin-public-typescript'
// https://vitejs.dev/config/
export default defineConfig(() => ({
define: {
custom_define: JSON.stringify('custom define!'),
hello_world: JSON.stringify({ hello: 'world' }),
},
plugins: [
publicTypescript(),
// 在这里通过 injectScrpts 把代码插入到最后的html中
injectScripts((manifest) => [
{
attrs: { src: manifest['hello-world'] },
injectTo: 'head',
},
]),
],
}))
其二直接引入manifest
import { manifest } from 'vite-plugin-public-typescript/client'
console.log(manifest['hello-world'])
这个manifest里面包含了js对应的资源地址
总结
希望把某些script在页面挂载前执行，在大部分情况下，在 index.html 中直接写 script ts 就可以了，少部分ssr的情况下，可以使用 vite-plugin-public-typescript 插件辅助
原文链接：https://juejin.cn/post/7348762390387064872 作者：minko
