通过上篇《svelte3前端框架入门教程》介绍我们知道,svelte是编译时框架,很明显的优势是编译后不依赖框架库,最后运行时代码得以进一步减少,同时它也是响应式的。虽然目前并没有太多的实践项目,但是我觉得这个明显的优化收益值得思考它的使用场景。

背景

在这个月,我接到了一个前端任务,是一个关于客户端路由器预订活动的前端功能开发。路由器预订分为路由器商品详情页面、快递表单提交页面、支付页面、订单列表页面,就这么一个功能,如果用以前的技术栈的话,先对比一下优缺点:

  1. 原生:代码体积小,解析快,开发时间稍长。
  2. jquery:引入jquery及jquery插件体积变大,解析稍慢,开发时间比原生短一些。
  3. vue:引入框架库,框架代码稍微比jquery小,解析稍慢,开发时间比使用jquery短。

首先注意上面只对比了代码大小、js解析时间、开发时间,其实还有许多因素未考虑,显然这是为了给svelte出场机会。如果我们用svelte3开发的话,代码既小,在熟悉svelte3框架的情况下开发时间也很短,这是理论上的,现实的一些情况还是值得我们去考虑的,比如svelte3的生态、周边配套,这些也决定了开发时间的长短,踩坑多少。不管怎么样,因为路由器预订活动页面是在客户端浏览,不需要太考虑兼容性问题(看了它文档没说兼容相关的问题),在估计能按时完成的情况下,决定吃一次螃蟹。

收获

通过开发中的实践,确实多多少少遇到了些问题,不过大都是预期中的。获得的效果也是很明显的,整个项目压缩完在没开启gzip的情况下只有58kb,感到非常满意。收获不是这篇文章重点要讲的,遇到的问题我觉得才是重点,可以和大家分享下。开发中的问题:

  1. 构建工具问题:svelte3是没有成熟的脚手架,初始化项目分为两种,分为直接下载和模板。个人建议使用模板,官方推荐rollup作为构建工具,也可以使用webpack。不过这两种构建工具模板都只进行了简单的支持,提供了处理svelte格式文件的能力,其它东西(eslint、scss、ts、图片处理...)还需要自己花时间去配置,不像vue-cli开箱即用、成熟、灵活。
  2. 社区不成熟:svelte官方文档和教程都比较简单(目前还没发现中文版的),看完这些大部分代码上的问题都可以解决。其它问题主要还是到github的issues去找找看,去stackoverflow、百度、谷歌能找到答案的不多。svelte相关的文章也不多,最佳实践和方案只有自己去摸索。
  3. 面条代码:缺乏经验的用户可能会写出 “面条代码”,因为在svelte文件里的script标签里可以自由发挥,不过我们可以通过抽取函数去组织代码,让代码更简洁、容易理解和维护。另外svelte3写代码的方式有点像还未发布的vue3,可以参考一下这篇文章《Vue Function-based API RFC》
  4. IDE支持问题:目前IDE对svelte文件的支持还不是很完善,对于webstorm用户,可以安装Svelte插件来获取部分支持,然后通过设置Editor->File Types找到Vue.js Templates添加*.svelte来获取进一步的支持。

浏览器兼容方案

我是用webpack去构建前端代码的,如果要使svelte开发的项目兼容ie9+的话,就需要babel-loader的加持。大概配置如下:

const babelLoaderConfig = {
  loader: 'babel-loader',
  options: {
    presets: [['@babel/preset-env', {
      targets: ['> 1%', 'last 2 versions', 'ie >= 9'],
      useBuiltIns: 'entry'
    }]]
  }
};
const svelteLoaderConfig = {
  loader: 'svelte-loader',
  options: {
    emitCss: true,
    hotReload: true,
    preprocess: require('svelte-preprocess')({ /* options */ }),
    legacy: true
  }
};
rules: [{
    test: /\.(html|svelte)$/,
    use: prod ? [ babelLoaderConfig, svelteLoaderConfig ] : [svelteLoaderConfig]
  },
  {
    test: /\.(html|m?js)$/,
    use: [ babelLoaderConfig ]
  }]

最后

文章就写到这里了,希望能给你带来帮助。