与上次的移动端项目拆分方案相比，做了以下改动：

• 分离了部分移动端 css 文件
• 改用 git+https 方式从 git 代码库中安装移动端的构建产物，省去了发版、上传 npm 包和刷新淘宝源的麻烦

分离后，主仓库在生产环境下的全量构建耗时减少约 11.65%，具体测试结果如下：

现在的移动端项目代码并未完全与主仓库分离，主仓库中还存在一些移动端的代码，主要原因如下：

• css 文件依赖关系复杂，拆分难度大
• 部分页面的 js 和 css 文件是由 Rails 的 Asset Pipeline 管理的，它们只能在主仓库中

对于这些问题，在开发初期如果有良好的模块化意识和开发规范约束话都是可以避免的，例如：

• 统一使用 Webpack 打包 css 和 js 文件，尽量不依赖 Rails 环境的工具和资源
• js 和 css 代码应该根据功能、作用范围划分文件和目录，以便区分和查找

红薯提了一些关于 Gitee 前后端分离的问题，暗示 Gitee 现有前端代码需要改进，但以 Gitee 现有情况看来，前后端代码都混在同一个仓库里，共用同一开发流程，而且组件库中的部分组件依赖后端在页面中生成的 window.gon 对象，直接搞前后端分离的话难度非常大，因此，只能将这项工作拆分成多个步骤来进行，大致如下：

1. 调整目录结构
2. 整理 JavaScript 和 CSS 代码，使其不再依赖主仓库的老代码
3. 移动前端代码至新仓库中
4. 对企业版的页面逐一重构，实现前后端分离
5. 重构组件库，移除对 window.gon 对象的依赖

先从调整目录结构开始，让前端代码更容易从主仓库中分离出去，顺便处理掉老代码。

在上次的《Webpack 配置改进方案》中，部分前端代码已经整理进了 webpack 目录，这次对目录结构做进一步的调整，并把所有经过 webpack 打包的JavaScript 代码和 Vue 组件都移入 webpack 目录中。

调整后的目录里结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

webpack/
    packages/
        gitee-axios/
        gitee-framework/
        gitee-gantt-chart/
        gitee-locales/
        ...
    projects/
        api-doc/
        babel/
        community/
        enterprise/
            components/
            directives/
            lib/
            mixins/
            pages/
                dashboard/
                events/
                issues/
                members/
                milestones/
                programs/
                projects/
                pulls/
                wikis/
                ...
        mobile/
    shared/
        components/
        directives/
        lib/
        mixins/
    webpack.config.js
    webpack.projects.config.js

子项目移动到了 projects 目录，packages 和 shared 目录都包含被多个子项目依赖的代码，但 shared 包含的都是单个模块，而 packages 包含的是一些可作为依赖库/包的代码。