简单快速的动态加载 css 和 js 文件

[starryiu]

使用 VueUse 可以快速的在 vue 项目中动态加载 css 和 js，实现部分只需两行代码就可以做到，相当优雅。

动态加载 css 文件

使用 useStyleTag 方法，将 css 代码写成字符串放到 js 文件，然后 export，最后导入使用即可。

当然也可以使用 import() 函数直接导入 css 文件。

//更改prism主题
import { normalTheme, okaidiaTheme } from "@/assets/prism/prism";
const isDark = useDark();
const { css } = useStyleTag(isDark ? okaidiaTheme : normalTheme);
watch(isDark, (dark) => {
  css.value = dark ? okaidiaTheme : normalTheme;
});

动态加载 js 文件

使用 useScriptTag 方法，和 useStyleTag 方法一样，不过要注意把 js 文件放到 public 目录中，不能像 css 那样直接将 js 代码写成字符串。

const { load, unload } = useScriptTag(
  "/test.js",
  (el: HTMLScriptElement) => {
    console.log("js文件加载完成。");
  },
  { manual: true },
);
onMounted(async () => {
  await load();
});

动态导入 js 模块

可以用 import() 函数，在 vite 构建的 vue 项目中，使用 import() 函数导入的模块会单独生成一个 js 文件，可以防止 build 出的 index-***.js 文件过大，官方推荐的是 index-***.js 大小不要超过 500kb。

还有很多好用的方法可以看官方文档

前往官方文档 虽然是纯英文文档，不过很轻松就能看懂，毕竟从方法名就能知道大概的意思。