在传统的实践中，当我们要创建一个vue项目时，往往需要自己配置webpack, eslint, babel, 各种loader等等一大堆东西，耗费很多时间。后来，vue-cli出现，让我们创建项目简单了很多，只需一条命令，选择一些配置，便自动生成一个功能齐全的项目。然而，用vue-cli创建的项目，哪怕把不需要的东西都去掉勾选，最后生成的项目还是显得臃肿复杂（本地安装了依赖，体积超过了70MB，编译速度慢，最后dist里的东西体积也大）。
作为一个有洁癖的程序员，肯定不会在这里止步，还要继续优化项目让他更轻更小更快。如何做到呢？如下是我总结的最小项目原则：
- 使用CDN的库而非作为项目依赖参与编译（减小项目体积和生成代码体积，提升编译和页面打开速度）
- 使用全局依赖而非本地依赖（减小项目体积，避免依赖重复下载和储存）
- 对于初学者及小型项目，可以避免使用babel, prettier, eslint等增加复杂度的工具
- 使用pug, stylus等预编译语言（简化代码，减少行数，提升复用）
应用这些原则，来创建一个最简单的项目：
- 安装全局依赖：
yarn global add @vue/cli @vue/cli-service-global。若使用pug可以加装pug pug-plain-loader - 创建App.vue，内容举例：
<template lang="pug">
h1 Hello Vue!
</template>
这时我们已经可以通过vue serve、vue build来开发和编译了，但是还需优化
- 创建vue.config.js，内容为：
module.exports = {
publicPath: './',
configureWebpack: {
externals: {
vue: 'Vue'
}
}
}
这里我把publicPath设成./是为了编译后的文件也能静态地打开查看，不是必须的。
关键点是把webpack配置加一条使用外部（CDN）的全局Vue，这样我们的项目编译就不需要处理vue依赖了，只要编译项目本身的源代码。这时我们再执行vue build会发现速度快了很多，编译后代码体积十分小巧。
- 我们需要在html里从CDN引入vue，否则项目无法运行。但是项目没有html文件，所以我们需要创建public文件夹，然后在里面创建index.html替换掉默认的html模版，内容如下：
<!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>
这样一个最简单小巧的vue项目就创建完成了，仅仅包含3个文件，23行代码，项目总大小不过500B，相比之下vue-cli创建的项目动辄70多MB，速度也慢得多。你也可以将这个简单的3个文件的项目保存成一个模版来使用，每次创建新项目只需复制粘贴，岂不快哉。
网友评论