astro 调用组件前的逻辑判断并不能阻击打包组件内的客户端 JS

想着用选项控制在开启时引放评论

--- import Waline from "@/theme-simple/components/Waline.astro"; import { config } from "@/theme-simple/config"; --- { console.log(config.waline.enable) } { config.waline.enable && <Waline /> } 

选项关闭时，html 不会被引入，但是 JS 仍然会打包进来执行。结果就是因为 html 元素不存在而报错。。对应的打包体积也会增加。。

--- import { config } from "@/theme-simple/config"; const cOnfigWaline= config.waline; --- <div id="waline"></div> <script define:vars={{ configWaline }}> import { init } from "@waline/client"; import "@waline/client/style"; document.addEventListener("DOMContentLoaded", (event) => { init({ el: "#waline", serverURL: configWaline.serverURL, }); }); </script> 

可以改成 <script is:inline define:vars={{ configWaline }}>，然而这样又不能从 npm 加载文件了，需要走 CDN 。。

就很纠结。。