在传统的实践中,当我们要创建一个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个文件的项目保存成一个模版来使用,每次创建新项目只需复制粘贴,岂不快哉。