飘刃,速度碾压 Vue-CLI 的轻量级 Vue 项目构建工具

飘刃,是前两天才首次公开发布的轻量级 Vue 项目前端工程构建工具,使用 Rollup 打包。

官网:http://www.chjtx.com/pr1/

以下是官方的对比

飘刃 VS Vue-CLI

对比环境 华为荣耀 MagicBook Windows 10 家庭版 i5 8G 64位 联通4G热点 30多个组件的小型 Vue 项目

飘刃Vue-CLI
工具版本piaoren@0.1.1@vue/cli@3.6.3
依赖包数487689
安装命令npm i -g piaorennpm i -g @vue/cli
安装时间18s1m 42s
支持编码Pug Sass ES6+Pug Sass Less Stylus ES6+ TypeScript
创建项目pr1 init 只需要填项目名称vue create/vue init 需要填选多项
启动命令pr1 startvue serve
启动时间2s 与项目内容多少无关6.8s 项目内容多少决定
热更响应支持更新 css 和刷新页面<br>两种方式,不支持 js 更新<br>更新 js 需要刷新页面<br>响应速度 立即支持 css 和 js 更新,vue 组件更新<br>有点鸡肋,很大概率需要手动更新<br>才能看到预期效果,每次变化都需<br>要编译,响应速度 稍慢
打包工具RollupWebpack
打包时间5s 项目内容多少决定10s 项目内容多少决定
静态资源所有资源路径在任何地方<br>都固定相对于入口文件少于4k的图片会被转为 base64<br>保存在css文件里
多页应用无需配置需要配置 pages
插件支持Rollup 插件规范Webpack 插件规范
单元测试暂不支持可选

总结:飘刃安装时间、启动速度、响应速度、打包时间都优于 Vue-CLI,但是配置方面不及 Vue-CLI 丰富。中小型无需配置的项目选择飘刃,大中型需要多方面资源配合的项目选择 Vue-CLI。

官网的快速上手

把飘刃安装到全局,任意目录都可以运行飘刃的命令 pr1

将会自动生成项目名称命名的文件夹,包含若干工程文件

进入工程目录,执行以下命令开启开发模式

  • 修改 src/main.js ,添加 Layout 组件
  • 创建 src/pages 目录,并添加 src/pages/Layout.vue 文件
  • 创建 src/pages/Item.js
  • 创建 src/pages/Item.html

在浏览器访问 http://localhost:8686/

开发完成后,使用以下命令打包

打包完成后可在 dist 目录双击 index.html 到浏览器访问,如果项目包含 ajax 请求,file:// 协议文件无法跨域,可以在 dist 目录运行 pr1 start 8080 开启飘刃服务,在浏览器访问 http://localhost:8080/

欢迎尝试飘刃,如有什么疑问,极欢迎留言评论

评论 ( 2 )
最新评论
终天霸主 1F 半小时前 2F

装逼用的,没想过你会用,哈哈

bestime 23 天前 1F

看这名字就不想用