主要诉求和存在的问题
- 这是一个包含多个模块的大型前端项目，过往我们采用多个单页面来隔离各个模块，现希望只使用一个单页面包含所有模块
- 打包
- 采用多个单页面是为了加快打包速度，使各个模块的发布互不影响。如何解决模块打包速度问题，热打包能否胜任？
- 采用多个单页面时，公共组件改动必须对所有模块进行重新打包。在单页面应用中如何避免公共组件的修改导致所有模块重新打包？
- @vue/cli创建的项目在打包时各个chunk之间是相互独立的，但是都共同会影响到app.js这个文件。即，一个文件改变只会影响到同步引用该文件的模块，不会影响到异步引用的。
- 如何实现同一库不同版本的共存
- 多语言
- 在只有几种语言的项目中，把语言内嵌各个组件中比较方便代码管理
- 在需要多种语言时，为了压缩语言包体积，采用按需加载。同时为了方便管理散落在各个模块内的语言文件，还需要实现自动构建。
- 更复杂的情况是按用户当前模块、倾向语言需要进行加载，但是这需要权衡多次请求的开销和语言包大小开销。
- 最好的方式是实现服务端渲染
- 路由
- 状态
- 如何实现sessionStorage和状态的同步
- 如何跨框架共享状态
目录结构
- assets 静态文件目录
- components 全局公共组件
- langs 全局公共组件多语言
- zh.json
- other.json
- component.vue 公共组件代码
- other.vue
- fun 全局公共函数
- buildLang.js 构建i18n messages对象的函数
- other.js
- langs
- zh.js 搜集散落在模块中的zh语言包，每种语言需要一个文件
- other.js
- modules
- one 大功能模块
- components 大功能模块中的公共组件
- fun 大功能模块中的函数
- views 大功能模块中的各个功能点
- about 功能点about
- lang 功能点i18n
- zh.json
- other.json
- About.vue 功能点的代码
- Other.vue
- routes.js 功能点的路由
- home 功能点home
- 同about
- moduleRoutes.js 功能块路由
- store.js 功能块状态，待商榷
- other 其他大功能块
- 同one
- App.vue
- i18n.js 按需加载多语言
- main.js
- router.js 收集功能块路由生成根路由
- store.js 根状态，待商榷