WordPress主题END开发技术选型思路

在尝试LitSvelte框架之后,我更倾向于Svelte,其语法更友好。可使用Vite 进行初始化Svelte脚手架。

但测试之后,Svelte并不兼容IE11,但使用@vitejs/plugin-legacy 之后尝试可以兼容(暂时)。

由于此主题页面中,为突出文字内容及不改变原有SEO收录路径,所有有效内容(包括文章列表、文章内容、菜单、部分锚文本)还是采用PHP进行服务端渲染,所以,IE11中应该是会正常体现出这些内容。

当然页面样式可能需要使用CSS Hack或HTML Hack方式进行微调。

//只针对IE
@media screen\0 {
/*样式*/
}
<!--[if IE]> 所有的IE可识别 <![endif]-->

需要说明一下,我并无IE兼容的执念,虽然IE现在已经被微软放弃了,但由于在使用360极速浏览器时候,有一个极速模式和兼容模式,切换兼容模式时就是IE模式。这里有些同学的浏览器默认设置的是兼容模式,所以我是考虑这部分访客。

所以此次开发,我不会太考虑JS脚本的IE兼容性,毕竟现在没多少人用IE了。仅考虑其余低版本浏览器(如Chrome 60)。这里使用@vitejs/plugin-legacy 插件即可兼容,此插件会为低版本浏览器添加语法相对应的polyfill。

打包之后,polyfills文件可能会比较大,但编译结果是按需加载的,所以不用考虑加载效率。况且几百K之内的大小对于现在的网络和浏览器来说,完全不必担心。若想限制polyfills文件大小,可以配置仅需要的语法。

legacy({
      // 版本兼容(如原生ESM在低版本浏览器中不兼容问题)
      targets: [
        "defaults",
        "Chrome >= 52",
        "Edge >= 15",
        "Firefox >= 54",
        "Android >= 40",
        "Safari >= 10.1",
        "iOS >= 10.3",
        "IE >= 11",
      ],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"], // 面向IE11时需要用的插件
      renderLegacyChunks: true,
      polyfills: [] // 这里配置仅需要转义的语法
 })

由于Svelte 在运行时无虚拟Dom中间层的性能损耗,这里用起来也较Vue更轻量。

需要用到响应式渲染的内容并不太多。这里也仅用到框架的模板引擎功能。

使用框架而不直接用模板引擎的原因是:

  • 一些交互功能使用框架会便于开发,更便于后期主题的功能扩展
  • 便于使用ESM引入一些额外的包
  • 便于使用CSS预处理器(less/sass),这个很关键
  • 便于组件化以及组件复用,这个也很关键

当然,此次开发使用到Svelte可能会有很多坑,比如:

  • 多入口页打包配置
  • 打包结果呈现WordPress主题的php文件结构(这里是否需要手动拆分)

待我慢慢探索。


经过长期开发探索,由于wordpress需考虑到SEO,无法全部使用响应式数据填充页面,而必须使用PHP文件进行开发。再者,Svelte 是编译时框架,种种原因导致无法更好的进行开发环境预览,故放弃Svelte ,还是使用 Vue 。(2024-02-06)

最终方案:

  • 放弃Vite,使用原始开发方式
  • 编译和实时预览使用Node开发预览和编译程序
  • css预处理使用less,less是基于Javascript的,可以在node中使用其render函数进行程序化编译
  • 放弃TS,使用ES-Module方式开发JS
  • 有需要的模块如vue\axios等使用cdn链接引入
  • 放弃更好的兼容性,使用更新的js语法进行开发
加载中...
加载中...