飄刃，速度碾壓 Vue-CLI 的輕量級 Vue 專案構建工具

chjtx發表於2019-04-26
Vue

飄刃，是前兩天才首次公開發布的輕量級 Vue 專案前端工程構建工具，使用 Rollup 打包。

官網：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
依賴包數 487 689
安裝命令 npm i -g piaoren npm i -g @vue/cli
安裝時間 18s 1m 42s
支援編碼 Pug Sass ES6+ Pug Sass Less Stylus ES6+ TypeScript
建立專案 pr1 init 只需要填專案名稱 vue create/vue init 需要填選多項
啟動命令 pr1 start vue serve
啟動時間 2s 與專案內容多少無關 6.8s 專案內容多少決定
熱更響應 支援更新 css 和重新整理頁面
兩種方式，不支援 js 更新
更新 js 需要重新整理頁面
響應速度 立即		 支援 css 和 js 更新，vue 元件更新
有點雞肋，很大概率需要手動更新
才能看到預期效果，每次變化都需
要編譯，響應速度 稍慢
打包工具 Rollup Webpack
打包時間 5s 專案內容多少決定 10s 專案內容多少決定
靜態資源 所有資源路徑在任何地方
都固定相對於入口檔案		 少於4k的圖片會被轉為 base64
儲存在css檔案裡
多頁應用 無需配置 需要配置 pages
外掛支援 Rollup 外掛規範 Webpack 外掛規範
單元測試 暫不支援 可選

總結：飄刃安裝時間、啟動速度、響應速度、打包時間都優於 Vue-CLI，但是配置方面不及 Vue-CLI 豐富。中小型無需配置的專案選擇飄刃，大中型需要多方面資源配合的專案選擇 Vue-CLI。

官方快速上手操作

npm i -g piaoren
複製程式碼

把飄刃安裝到全域性，任意目錄都可以執行飄刃的命令 pr1

pr1 init

? Project name:           # 專案名稱至少兩個字元，由大小寫字母、中劃線、下劃線，及數字組成，數字不能為首字元
? Project description:    # 可不填
複製程式碼

將會自動生成專案名稱命名的資料夾，包含若干工程檔案

進入工程目錄，執行以下命令開啟開發模式

npm run dev
複製程式碼
  • 修改 src/main.js ，新增 Layout 元件
// main.js
import Vue from 'vue/dist/vue.esm.browser.js'
import Layout from './pages/Layout.vue'

// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  components: {
    Layout
  },
  template: '<Layout/>'
})
複製程式碼
  • 建立 src/pages 目錄，並新增 src/pages/Layout.vue 檔案
<!-- pages/Layout.vue -->
<template lang="pug">
div
  div.top
    input(v-model="text")
    button(@click="submit") 新增
  ul
    Item(v-for="(i, k) in items" :name="i" :key="k")
</template>
<script>
import Item from './Item.js'
export default {
  components: {
    Item
  },
  data () {
    return {
      text: '',
      items: []
    }
  },
  methods: {
    submit () {
      this.items.push(this.text)
      this.text = ''
    }
  }
}
</script>
<style lang="sass" scoped>
$bg: #ccc;

.top {
  padding: 20px;
  background: $bg;
}
</style>
複製程式碼
  • 建立 src/pages/Item.js
// pages/Item.js
import html from './Item.html'

export default {
  template: html,
  props: {
    name: String
  }
}
複製程式碼
  • 建立 src/pages/Item.html
<!-- pages/Item.html -->
<li class="item">{{ name }}</li>

<style scoped>
.item {
  background: #eee;
}
</style>
複製程式碼

在瀏覽器訪問 http://localhost:8686/

開發完成後，使用以下命令打包

npm run build
複製程式碼

打包完成後可在 dist 目錄雙擊 index.html 到瀏覽器訪問，如果專案包含 ajax 請求，file:// 協議檔案無法跨域，可以在 dist 目錄執行 pr1 start 8080 開啟飄刃服務，在瀏覽器訪問 http://localhost:8080/

歡迎嘗試飄刃，如有什麼疑問，極歡迎留言評論

相關文章