本文已参与「新人创作礼」活动，一起开启掘金创作之路。
项目里只有一个网页版的管理员登录页面，默认是微信扫码登录，有一个按钮可以切换成手机号验证码登录。 之前为了图省事，把逻辑全都写在一个vue文件里了，文件内容大致如下：
<template>
<div v-if='isWehcat'>
<!-- 微信扫码登录 -->
<qrcode-vue :value="value" :size="size" />
...
</div>
<div v-else>
<!-- 手机号验证码登录 -->
<el-form ref model rule @keydown.enter>
...
</el-form>
</div>
</template>
<script lang='ts' setup>
import '@/styles/Login/index.styl'
import { Iphone, User, Message } from '@element-plus/icons-vue'
import QrcodeVue from 'qrcode.vue'
import { generateUuid } from '@/utils'
import { loginAPI } from '@/api'
import { useLoginStore } from '@/store/login'
import { parseJwt } from '@/utils/parseJwt'
import { version } from '@/../package.json'
// 下面还有大概200行的ref function watch onBeforeUnmount等逻辑代码
结果yarn build打包出来的文件，最大的一个竟然有700多k
dist/index.html 0.42 KiB
dist/assets/Home.8aeeb21e.js 0.64 KiB / gzip: 0.42 KiB
dist/assets/index.edde9f6d.css 1.60 KiB / gzip: 0.56 KiB
dist/assets/index.59fa7e7c.js 17.71 KiB / gzip: 6.86 KiB
dist/assets/index.9438360c.css 11.35 KiB / gzip: 2.60 KiB
dist/assets/index.e2ccb7fb.js 24.90 KiB / gzip: 9.28 KiB
dist/assets/index.0120e66b.css 33.12 KiB / gzip: 4.52 KiB
dist/assets/index.d5e4a339.js 746.93 KiB / gzip: 241.70 KiB
用的全是最新的包，package.json内容如下：
{
"name": "baiqian",
"version": "0.0.3",
"private": true,
"scripts": {
"dev": "vite --host",
"build": "vue-tsc --noEmit && vite build",
"staging": "vue-tsc --noEmit && vite build --mode staging",
"serve": "vite preview --host",
"preview": "vite preview",
"pre": "yarn install --ignore-scripts && yarn build",
"update": "yarn upgrade-interactive --latest",
"lint": "zx .codeLint.mjs",
"bump": "zx .bump.mjs",
"prepare:comment": "Git hook for code lint",
"prepare2": "zx .doPrepare.mjs"
},
"dependencies": {
"@element-plus/icons-vue": "^1.1.4",
"axios": "^0.26.1",
"element-plus": "^2.1.8",
"pinia": "^2.0.13",
"qrcode.vue": "^3.3.3",
"vue": "^3.2.31",
"vue-router": "^4.0.14"
},
"devDependencies": {
"@babel/types": "^7.17.0",
"@types/lodash": "^4.14.181",
"@types/lodash-es": "^4.17.6",
"@types/mockjs": "^1.0.6",
"@types/node": "^17.0.23",
"@typescript-eslint/eslint-plugin": "^5.18.0",
"@typescript-eslint/parser": "^5.18.0",
"@vitejs/plugin-vue": "^2.3.1",
"amfe-flexible": "^2.2.1",
"eslint": "^8.13.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.6.0",
"husky": "^7.0.4",
"lint-staged": "^12.3.7",
"lodash": "^4.17.21",
"mockjs": "^1.1.0",
"postcss": "^8.4.12",
"postcss-pxtorem": "^6.0.0",
"prettier": "^2.6.2",
"prompts": "^2.4.2",
"stylus": "^0.57.0",
"stylus-loader": "^6.2.0",
"typescript": "^4.6.3",
"unplugin-auto-import": "^0.6.9",
"unplugin-vue-components": "^0.18.5",
"vite": "^2.9.1",
"vue-loader": "^17.0.0",
"vue-tsc": "^0.33.9",
"zx": "^6.0.7"
}
}
以前的项目用的是Vue2.6+webpack，采用的是限制文件大小的方式解决打包出来单文件过大的问题； 昨天看Vue3官方文档时，发现还可以用异步组件的方式来优化代码，遂决定对这个登录的vue文件举起屠刀，将它拆分成多个组件。
欲知详情，请看下回分解~
