跟着业务的不停累积，目前我们 ToC 端主要项目，撤除 node_modules， build 配置文件，dist 静态资源文件的代码量为 137521 行，后台打点系统下各个子应用代码，撤除依赖等文件的总行数也到达 100万 多一点。

代码量意味不了什么，只能证明模块很多，但不异两个项目，在运行时性能不异情况下，你的 10 万行代码能容纳并维护 150 个模块，并且开发顺畅，我的项目中 10 万行代码却只能容纳 100 个模块，添加成果也好，维护起来也较为繁琐，这就很值得思考。

本文会在主要描述以 Vue 技术栈为技术主体，ToC 端项目业务主体，在构建过程中，遇到或者总结的点（也会提及一些 ToB 项目的场景），可能并不适合你的业务场景（仅供参考），我会尽可能多的描述问题与此中的思考，最大可能的辅佐到需要的同学，也辛苦开发者发明问题或者不同理/不正确的处所及时向我反馈，会尽快改削，欢迎有更好的实现方法来 pr。

Git 地点

vue-develop-template 完善中，可以运行

React 项目

可以参考蚂蚁金服数据体验技术团队编写的文章：

如何打点好10万行代码的前端单页面应用

本文并不是基于上面文章写的，不过其时在看到他们文章之后感受有相似的处所，相较于这篇文章，本文可能会枯燥些，会有大量代码，同学可以直接用上货仓看。

① 单页面，多页面

首先要思考我们的项目最终的构建主体是单页面，还是多页面，还是单页 + 多页，通过他们的优错误谬误来分析：

单页面（SPA）

长处：体验好，路由之间跳转流程，可定制转场动画，使用了懒加载可有效减少首页白屏时间，相较于多页面减少了用户访谒静态资源处事器的次数等。

错误谬误：初始会加载较大的静态资源，并且跟着业务增长会越来越大，懒加载也有他的毛病，不做特殊措置惩罚惩罚倒霉于 SEO 等。

多页面（MPA）：

长处：对搜索引擎友好，开举事度较低。

错误谬误：资源请求较多，整页刷新体验较差，页面间通报数据只能依赖 URL，cookie，storage 等方法，较为局限。

SPA + MPA

这种方法常见于较老 MPA 项目迁移至 SPA 的情况，错误谬误结合两者，两种主体通信方法也只能以兼容MPA 为准

不过这种方法也有他的好处，假如你的 SPA 中，有类似文章分享这样（没有后端直出，后端返 HTML 串的情况下），想保证用户体验在 SPA 中开发一个页面，在 MPA 中也开发一个页面，去失没用的依赖，或者直接用原生 JS 来开发，分享出去是 MPA 的文章页面，这样可以加快分享出去的打开速度，同时也能减少静态资源处事器的压力，因为如果分享出去的是 SPA 的文章页面，那 SPA 所需的静态资源至少都需要去进行协商请求,固然如果处事配置了强缓存就忽略以上所说。

我们首先按照业务所需，来最终确定构建主体，而我们选择了体验至上的 SPA，并选用 Vue 技术栈。

② 目录布局

其实我们看开源的绝大部分项目中，目录布局城市差不太多，我们可以综合一下来个通用的 src 目录：

src ├── assets // 资源目录 图片，样式，iconfont ├── components // 全局通用组件目录 ├── config // 项目配置，拦截器，开关 ├── plugins // 插件相关，生成路由、请求、store 等实例，并挂载 Vue 实例 ├── directives // 拓展指令调集 ├── routes // 路由配置 ├── service // 处事层 ├── utils // 工具类 └── views // 视图层 ③ 通用组件

components 中我们会存放 UI 组件库中的那些常见通用组件了，在项目中直接通过设置别号来使用，如果其他项目需要使用，就发到 npm 上。

布局 // components 简易布局 components ├── dist ├── build ├── src ├── modal ├── toast └── ... ├── index.js └── package.json 项目中使用

如果想最终编译成 es5，直接在 html 中使用或者部署 CDN 上，在 build 配置简单的打包逻辑，搭配着 package.json构建 UI组件 的自动化打包颁布，最终部署 dist 下的内容，并颁布到 npm 上即可。

而我们也可直接使用 es6 的代码：

import 'Components/src/modal' 其他项目使用

假设我们颁布的 npm 包叫 bm-ui，并且下载到了本地 npm i bm-ui -S:

改削项目的最外层打包配置，在 rules 里 babel-loader 或 happypack 中添加 include，node_modules/bm-ui：

// webpack.base.conf ... rules: [{ test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', // 这里添加 include: [resolve('src'), resolve('test'), resolve('node_modules/bm-ui')] },{ ... }] ...

然后搭配着 babel-plugin-import 直接在项目中使用即可：

import { modal } from 'bm-ui' 多个组件库