在傳統(tǒng)的實(shí)踐中，當(dāng)我們要?jiǎng)?chuàng)建一個(gè)vue項(xiàng)目時(shí)，往往需要自己配置webpack, eslint, babel, 各種loader等等一大堆東西，耗費(fèi)很多時(shí)間。后來(lái)，vue-cli出現(xiàn)，讓我們創(chuàng)建項(xiàng)目簡(jiǎn)單了很多，只需一條命令，選擇一些配置，便自動(dòng)生成一個(gè)功能齊全的項(xiàng)目。然而，用vue-cli創(chuàng)建的項(xiàng)目，哪怕把不需要的東西都去掉勾選，最后生成的項(xiàng)目還是顯得臃腫復(fù)雜（本地安裝了依賴，體積超過(guò)了70MB，編譯速度慢，最后dist里的東西體積也大）。
作為一個(gè)有潔癖的程序員，肯定不會(huì)在這里止步，還要繼續(xù)優(yōu)化項(xiàng)目讓他更輕更小更快。如何做到呢？如下是我總結(jié)的最小項(xiàng)目原則：
- 使用CDN的庫(kù)而非作為項(xiàng)目依賴參與編譯（減小項(xiàng)目體積和生成代碼體積，提升編譯和頁(yè)面打開(kāi)速度）
- 使用全局依賴而非本地依賴（減小項(xiàng)目體積，避免依賴重復(fù)下載和儲(chǔ)存）
- 對(duì)于初學(xué)者及小型項(xiàng)目，可以避免使用babel, prettier, eslint等增加復(fù)雜度的工具
- 使用pug, stylus等預(yù)編譯語(yǔ)言（簡(jiǎn)化代碼，減少行數(shù)，提升復(fù)用）
應(yīng)用這些原則，來(lái)創(chuàng)建一個(gè)最簡(jiǎn)單的項(xiàng)目：
- 安裝全局依賴：
yarn global add @vue/cli @vue/cli-service-global。若使用pug可以加裝pug pug-plain-loader - 創(chuàng)建App.vue，內(nèi)容舉例：
<template lang="pug">
h1 Hello Vue!
</template>
這時(shí)我們已經(jīng)可以通過(guò)vue serve、vue build來(lái)開(kāi)發(fā)和編譯了，但是還需優(yōu)化
- 創(chuàng)建vue.config.js，內(nèi)容為：
module.exports = {
publicPath: './',
configureWebpack: {
externals: {
vue: 'Vue'
}
}
}
這里我把publicPath設(shè)成./是為了編譯后的文件也能靜態(tài)地打開(kāi)查看，不是必須的。
關(guān)鍵點(diǎn)是把webpack配置加一條使用外部（CDN）的全局Vue，這樣我們的項(xiàng)目編譯就不需要處理vue依賴了，只要編譯項(xiàng)目本身的源代碼。這時(shí)我們?cè)賵?zhí)行vue build會(huì)發(fā)現(xiàn)速度快了很多，編譯后代碼體積十分小巧。
- 我們需要在html里從CDN引入vue，否則項(xiàng)目無(wú)法運(yùn)行。但是項(xiàng)目沒(méi)有html文件，所以我們需要?jiǎng)?chuàng)建public文件夾，然后在里面創(chuàng)建index.html替換掉默認(rèn)的html模版，內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src='https://unpkg.com/vue@2.6.12/dist/vue.runtime.min.js'></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
這樣一個(gè)最簡(jiǎn)單小巧的vue項(xiàng)目就創(chuàng)建完成了，僅僅包含3個(gè)文件，23行代碼，項(xiàng)目總大小不過(guò)500B，相比之下vue-cli創(chuàng)建的項(xiàng)目動(dòng)輒70多MB，速度也慢得多。你也可以將這個(gè)簡(jiǎn)單的3個(gè)文件的項(xiàng)目保存成一個(gè)模版來(lái)使用，每次創(chuàng)建新項(xiàng)目只需復(fù)制粘貼，豈不快哉。
