vue|Vue+antd前端篇——架构的认知经验分享|架构师|vue.js|antdesi

前言最近工作变动，加上私事太多，给大家奉上迟来的第二篇，对前端架构的初步了解，我也是在学习的过长中，文中有不对的内容欢迎大神指正批评！
架构初体验
前端架构是什么，包括什么？在我印象中一直到17年前后才接触到前端架构这个概念，18年底才真正了解前端架构，可以说时间挺短的，但是项目开发上不可避免的要去接触架构的东西。
在我理解中，架构所承担的工作是很重要的，一个项目开发是否顺畅，可维护性、可扩展性、可管理性都决定了架构是否合格！简单来说，架构就是将前端项目进行模块化，让其更好的适应团队协作开发，而不是各自为战，没有在一条体系上！
举个栗子，a同学、b同学要调同一接口服务（不包含具体接口地址），这时候总不能两名同学各自写各自的接口调用服务吧，那样会有冗余代码，用起来也不方便，肯定是写公共接口服务更好，这就是架构的任务之一。再比如开发环境和生产环境的分离，肯定要写一套配置文件来管理，而不是每次上生产都去改接口请求的服务！最近就遇到这种情况了，搞的我很难受，最终抽时间把架构给调整了过来，不管开发还是生产，都不需要再去处理接口服务的尴尬问题了！
当然架构的工作远不止于此，还包括封装公共组件、公共方法、架构调优、nginx配置等等技术层面的支持，也包括部分项目管理的工作。下面给大家共享下我对架构的爱恨情仇！
正文
ps：因为换了工作，来到一家新单位，项目倒是起来了，可是维护性、扩展性的体验极差，搞的我不知道如何下手，所以决心要改掉当前的项目架构！
开始入手项目后，发现项目有几个很严重的问题急需解决：
1.组件没有按需引入；
2.dist包超过20M；
3.项目响应及其缓慢，需要10秒左右；
4.vue结构混乱；
5.生产环境和开发环境未进行区分配置，每次投产都需要大量修改文件接口配置；
6.图片未进行单独配置全部存在项目下，导致加载缓慢（跟项目方的要求有关）；
基本上大问题就是以上几个，小问题还一堆，比如书写规范、命名规范、接口约定等等，让我头疼不已！
准备下手！
第一步，按需引入组件，配置方法其实每个UI组件官方都有写，而且很详细，这里以antd为例，主要是引入babel-plugin-import 插件进行按需加载，然后修改babel.config.js文件即可。

module.exports = { presets: ["@vue/app"], +plugins: [ +[ +"import", +{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true } +] +] };

第二步，调整接口服务，同时配置开发和生产环境文件，干掉main.js大部分冗余文件。配置vue.config.js，设置反向代理，请求后端接口。

devServer: { host: 'localhost', //target host port: 8080, proxy: { '/xx-xxxxx': { target: 'https://x.xxx.com.cn/xx-xxxxx', changeOrigin: true, pathRewrite: { '^/xx-xxxxx': '' // 用/api代替后端接口路径 }, } } },

其中包含设置css分离，取消css的sourceMap，最重要的productionSourceMap一定要为false，可以极大降低构建dist包的大小。

css: { extract: true,//是否使用css分离插件 sourceMap: false,//主要为方便开发人员的错误定位,为true会大大延长打包时间 loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ // 把px单位换算成rem单位 rootValue: 37.5, // 换算的基数(设计图750的根字体为75) // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项 propList: ['*'] }) ] } } }, lintOnSave: false, publicPath: './', // disable source map in production productionSourceMap: false, // 生产环境取消map索引，大大降低dist容量 // babel-loader no-ignore node_modules/* transpileDependencies: []

下一步就是配置开发和生产环境，因为项目有一定的特殊性，所以nginx的配置有些比较固定，先上代码，创建一个.env.development文件和一个.env.production分别写上你的暴露变量，对应vue.config.js的serve

NODE_ENV=development VUE_APP_PREVIEW=false VUE_APP_REQUEST_API=/xx-xxxxx

VUE_APP_REQUEST_API暴露出来的变量可以在接口调用去直接调用，映射的就是/xx-xxxxx，即devserver的api接口服务地址，相比以前同事的每个页面单独去调服务要方便的多的多的多！

publicKey (parameter) { return axios({ url: process.env.VUE_APP_REQUEST_API + '/dingtalk/publickey', method: 'post', data: parameter }) }

development和production根据自己项目实际需求去调整就好了，我这边是不一样的，只需要修改/xx-xxxxx的映射地址就ok。
以上配置改完，dist包大概压缩完还有8M，比之前20多M缩减了很大，响应也快了很多，因为项目的周期太短，图片加载的问题没有很好的去进行处理，正常思路是减少http请求，例如将所有图标放在一张图上进行图片定位来使用，然后将静态文件单独放在一个服务上去调，相当于异步加载，可以再一步提升响应速度及dist包的瘦身。
当然，需要调整的远不止于此，包括vuex的管理也是个大问题，但是之前他写了太多的内容了，一时之间无法去修改到位，又面临项目投产，只能尽量去搞！也劝解各位小伙伴们一句，磨刀不误砍柴工，项目初期一定要将基础打好，否则后期很难受的！
【vue|Vue+antd前端篇——架构的认知】