滴滴 webapp 5.0 Vue 2.0 重构经验分享 about ddfe-blog HOT 56 OPEN

@bison1994 ，上一版确实是基于 scrat（fis的二次开发）构建的。由于我们用的 Vue，Vue 脚手架官方推荐就是 webpack，对应的 vue-loader 插件也是很强大。fis 和 webpack 比，确实社区，活跃度都要差很多，我曾经给 scrat 提过要支持 vue 2.0 预编译，1 个月也没有答复，所以。。果断换了 webpack。其实相对于 webpack，我对 fis 更加了解，毕竟百度大部分用的都是 fis，我在百度的时候也在 fis 基础上二次开发过，而且我也阅读过 fis 的源码，甚至用 gulp 插件模拟过 fis 大部分功能。fis 的设计理念也很不错（插件化、资源依赖关系表等），说的有点啰嗦了，总结几点吧：

1. webpack 对于 Vue 项目而言，支持程度非常好，可以看到 vue-cli 也在不断完善。webpack 和 react 的项目好像也是天然配。
2. webpack 的社区真的很不错，插件丰富，贡献者多，遇到问题大部分都可以找到解决方案。
3. webpack 对于写一些独立的 JS 库也非常友好，并且 webpack 2 的 tree-shaking 技术也是弥补了和 rollup 的差距。
4. fis 在百度内部使用很广泛，如果了解它，可以基于它做一些二次开发，fis 比较适合一些传统项目。

from ddfe-blog.

Vue.component(conf.name, (resolve, reject) => {
        loadScript(conf.src).then(() => {
          resolve(modules[id])
        }).catch(() => {
          reject()
        })
      })

想问下

1. 这里在线上动态注册组件时， conf.src 这个文件应该是组件单独编译打包的成一个文件的吧，所以这里你们是怎么把单独组件编译打包成一个文件的呢？是根据组件配置表遍历后逐个编译？

2. 本地开发环境 conf.src 这个引用的也是组件编译后的js文件还是类似 .vue 的源码文件？

from ddfe-blog.

@ustbhuangyi

Vue.component(conf.name, (resolve, reject) => {
        loadScript(conf.src).then(() => {
          resolve(modules[id])
        }).catch(() => {
          reject()
        })
})

问题：
（1）loadScript 函数的实现 是用的npm库，还是如何实现的，猜想你里面应该是promise的写法去动态创建scsript标签，插入异步业务线的 js 地址（单独基于webpack打包的），
（2）业务线代码仓库下的 JS开发 是直接编写vue格式文件的全局组件定义方式吗？
（3）这个组件的开发，他所依赖的npm包 在那里安装了？

建议给个例子！

from ddfe-blog.

@Thinking80s 建议分仓库维护、分别打包。另：我们的组件库是通过 Vue.component 全局注册的

from ddfe-blog.

@zicong-zhang 业务线打包生成 JS 发布到 cdn，同时更新 JSON 配置文件，主应用的后端负责读取业务线的 JSON 配置文件，然后输出到前端模板中，这样主应用前端就可以知道加载的 JS 地址了。

PS：现在回想自己当年做的这个，不就是现在炒的火热的”微前端”？

from ddfe-blog.

好文。之前使用相同技术栈重构了项目。有些功能模块刚用vue2实现，在重构中，就采用了原先后端路由跳转的方式。不足之处是需要多一次加载vue.js。
“异步注册路由”和“异步加载注册组件”没有尝试。涨知识了

from ddfe-blog.

感谢分享

code split我觉得用webpack.ensure也可以的，用lerna管理整个项目，比靠约定感觉还好些。

动态注册路由真的好么，为什么不开始的时候就引入。动态又难debug，万一要ssr时又会蛋疼……统一管理也一目了然，即使要放在模块文件夹下，觉得也是先写好好……

即使动态注册vuex modules，也要确保namespace不冲突，一直觉得vuex没有把elm architecture似的隔离做的特别好。

测试环境部署，可以ci来build，ci来构建docker image，ci上传registry，测试环境pull镜像……比如某司……

其实我最想问……一年前的项目感觉升级不到vue2了怎么办，没有测试也没有qa不敢重构怎么办……

from ddfe-blog.

@Thinking80s , 看问题 4

from ddfe-blog.

@treri

zhenyong/Blog#1
对于你的问题 1 ，文中也许有你需要的相关信息

from ddfe-blog.

@reverland
滴滴这个场景是不适合用 webpack.ensure 的，因为是动态加载其它业务线的代码，压根代码就不在一个仓库下，只能通过 loadscript 方式加载，所以也有动态注册路由的需求。
技术重构往往伴随着产品重构，单纯的技术重构不太现实，除非特别闲。。所以慢慢来吧，新项目可以用 vue2 了~

from ddfe-blog.

@zhenyong 谢谢. 周末两天, 写了一下原来使用 webpack 的时候遇到的一些问题, 还有切换到 fis 之后对项目的一些调整. 如果有兴趣可以看一下

使用 FIS3 构建 Vue 前端工程. webpack 用户也请看过来

from ddfe-blog.

@treri 看你极力安利 fis3，我泼点冷水吧~ fis3 有 405 个 open 的 issue，也好久没人维护了，社区贡献的 fis 插件基本也都是 fex 的人搞的吧~ 这样的构建工具，如果是放在大公司，估计也就百度比较适合用了（毕竟是他们搞的）。

from ddfe-blog.

托管在 npm 私服是如何进行维护和版本管理呐？动态加载的组件是如何处理编译大包的问题？@ustbhuangyi

from ddfe-blog.

@Thinking80s ，npm私服维护和版本管理和公共的 npm 没什么区别，只不过只能滴滴内部发布和下载罢了。动态加载的组件仍然用 vue-cli 初始化项目，编译打包都是一样的，只需要调用我们的接口把组件注册即可。

from ddfe-blog.

@ustbhuangyi我们现在遇到了业务模块和公共组件一起webapck打包后引用图片路径问题，公共组件和业务模块的图片资源放在各自路径下（公共组件和业务模块是git库分开管理）。

from ddfe-blog.

@Thinking80s , 图片通过 webpack 打包后要么会 base64 到 js 代码中（小图片），要么就会打包到对应的目录（一般是 img/），然后跟着其它静态资源（js、css）一起打包上线就可以了。注意要配置 publicPath，确保线上访问的路径正确。所以公共组件和业务模块分别编译打包上线就行了。

from ddfe-blog.

请问动态注册路由这里，如何处理参数问题？

from ddfe-blog.

情况是这样的：
1.公共组件库是单独项目，各个组件引用各自样式及背景图片css中background-url('./img')
2.业务组件模块也是单独项目，业务模块中使用公共组件，业务模块也是引用各自项目的样式

遇到的问题：公共组件库+业务组件模块一起用webapck打包后，导致引用图片路径不正确，现在做法是把公共组件库的img图片文件夹同时拷贝一份业务组件模块来使用。
@ustbhuangyi 请问下你们采用哪种方式处理这个问题？

from ddfe-blog.

@fengluo ，我们这个动态注册的路由不支持传参数，所有数据的通信我们都通过 Vuex

from ddfe-blog.

@Thinking80s ，你们应该是分开用 webpack 打包吧，公共组件你需要配置 publicPath，然后编译打包后，引用图片的地址就变成的绝对路径，然后你需要把这些图片上传到线上，保证引用地址的正确。不过我们目前组件库还没有超过 10k 大小的图片，大部分图标都是 icon-font，所以图片都 base64 到 js 里了

from ddfe-blog.

@ustbhuangyi 公共组件与业务组件是同级目录，公共组件没有单独打包是合在一起打包的，webapck通过alias别名引用全局路径方式，公共组件没有采用全局注册的方式引用。

from ddfe-blog.

npm私服是用Sinopia吗

from ddfe-blog.

@Rococolate 用的 Artifactory

from ddfe-blog.

啊，仓库已经分开了确实。只是觉得也可以设计成放一起的。

也是，产品重构再说吧……眼看新项目半年就变成旧项目……

from ddfe-blog.

@ustbhuangyi那么通过loadscript 方式加载的业务代码是怎么打包的？也是通过webpack单独项目打包方式吗？

from ddfe-blog.

请问，代码是 如何划分目录结构为好？ 有推荐的划分目录方式吗？
比如这样：

---app.js
    |
    ---actions
    |    |
    |    ---XX.Action.js
    |    ---YY.Action.js
    ---componets 
    |    |
    |    ---User.js
    |    ---Home.js
    ......

from ddfe-blog.

@Thinking80s 对，业务线的 JS 是单独通过 webpack 打包的

from ddfe-blog.

请问，针对安卓4.2以下手机是如何处理的？

from ddfe-blog.

@callmedadaxin 这么低版本的，基本忽略了吧

from ddfe-blog.

from ddfe-blog.

@cytGitHub 基本不低于 4.4 吧

from ddfe-blog.

from ddfe-blog.

@cytGitHub 需要配置.babelrc 文件，配置 plugins: ['transform-runtime']

from ddfe-blog.

@ustbhuangyi 业务线的 JS 是单独通过 webpack 打包情况下，那么相同的公用库或组件应该会存在重复的存在了。如：vue + vue-resource这样的npm包了。

from ddfe-blog.

你好，我们也用vue2.0重构的，但是我们在项目中遇到了一个bug，就是在微信端 iphone6s 10.2.1 系统 ，用户快速滑动页面的时候，页面还没有停止下来，就点击页面上的按钮，就会造成页面卡死（这个bug必现）。这个时候点击左上角返回无效，只能点击关闭退出才可以。然后我们把fastClick.js取消，就可以了，但是会有300ms的延迟，不知道贵司有遇到过这种问题吗？谢谢

from ddfe-blog.

上一版的 webApp 是用百度的 fis 在服务端构建的是吧，想了解一下 fis 和 webpack 用哪个好？在项目实践中各有什么优劣？谢谢。

from ddfe-blog.

@liujinjian1016 ，我手机恰好就是 10.2.1 的 iphone6s ，并没有复现你的问题~ 而且我们也用了 fastclick 库，也是没问题的。你也可以看看微信里的滴滴出行，通过你们的操作能复现问题么？

from ddfe-blog.

确实很多新东西出来之后 fis 的 parser 和 processor 总是比 webpack 的 loader 慢半拍

from ddfe-blog.

@ustbhuangyi 目前fis3的vue 2.0预编译已经支持了 fis3-parser-vue-component

并推荐一下我使用fis3 + typescript + vue 做的一个vue官方的 vue-hackernews-2.0 的 demo
https://github.com/Treri/fis3-typescript-vue-hackernews-2.0

from ddfe-blog.

@treri 恩，这个我知道，不过我们已经全部迁移到 webpack 了~

from ddfe-blog.

@ustbhuangyi 不知道你们使用webpack的时候有没有遇到两个问题

1 moduleId 基于数字不稳定的问题. 这个问题我在另一个issue中和别人讨论过 chemdemo/chemdemo.github.io#10 (comment)

webpack 的 moduleId 对于永久缓存的支持.

假设我们有这样一个 SPA 页面场景, 有一个路由文件 route.js, 会在此文件中使用 webpack 的 code spliting 写法, 按需加载文件.

在 route.js 中分别对应三个页面(foo, bar, baz), 按需加载对应的入口文件. 在入口文件中, 会再分别加载各个子页面依赖的文件.

• foo.js
  • dep1.js
  • dep2.js
• bar.js
  • dep2.js
  • dep3.js
• baz.js
  • dep1.js
  • dep3.js

当我们使用 webpack 进行 build 后, webpack 会给每个文件分配一个 moduleId, 这个 moduleId 是随着 webpack 处理到的文件的数目而进行递增的. 一种结果是类似于下面这样的, 文件后面的括号中是生成的 moduleId 号

• foo.js (1)
  • dep1.js (4)
  • dep2.js (5)
• bar.js (2)
  • dep2.js (5)
  • dep3.js (6)
• baz.js (3)
  • dep1.js (4)
  • dep3.js (6)

如果我们需要在foo.js中增加一个依赖 dep4.js, 那么相应的 moduleId 会变成类似于下面这样

• foo.js (1)
  • dep1.js (4)
  • dep2.js (5)
  • dep4.js (6)
• bar.js (2)
  • dep2.js (5)
  • dep3.js (7)
• baz.js (3)
  • dep1.js (4)
  • dep3.js (7)

我们只增加(或删除)了一个文件, 却导致了多个文件的 moduleId 变化, 这样就导致多个文件的内容发生了变化. 那么当重新发布后, 其实有的页面的内容根本不需要变化, 但是仅仅是因为 moduleId 变化, 而导致需要重新下载这些文件, 使得没法使用浏览器已经缓存的文件.

如果你的页面有几十个, 每次添加或者删除一个文件后, 都会导致几乎所有的文件的浏览器缓存失效.

虽然现在已经有了namedModulePlugin 插件, 但是总觉得不是很好用

2 CommonChunksPlugin 的 minChunks 提取公共模块的问题
在route中使用code split时, 我想把公共模块提取出来, 所以我使用commonChunksPlugin.

如果我把minChunks 设置为最小值, 即把所有的公共模块全都提取出来, 但是这个公共文件就会很大. 其实某个view可能只依赖了其中一个模块, 却要把整个文件下载下来 , 冗余性太高.

如果我把minChunks 设置的大一些, 就会出现, 有的公共模块被两个view使用, 但是不满足 minChunks 的要求, 所以没有被提取到 common.js 中, 导致这个模块在所有依赖它的View中分别打包了一次. 同样也造成了代码的冗余.

from ddfe-blog.

@treri ，你说的 webpack 的问题确实存在，这个是和 webpack 的实现相关，如果你的 code splitting 做的很细的话确实会很蛋疼。目前我们这边主要还是基于 vue-cli 创建的一套 webpack 配置，用的commonChunksPlugin 把 node_modules 部分的代码打包成一个 vendor.js，所以还没有你说的那个问题。至于 code splitting，就是我文章描述的那样的异步加载方式，不过这个是比较有滴滴特色的方式，一般的搞法还是基于 webpack 的 reuqire.ensure，就可能出现你说的那个问题。

from ddfe-blog.

@ustbhuangyi 谢谢~

只是我没觉得我在安利 fis3 😁, 只是就像文章最上面说的, 我用 webpack 的时候确实遇到了一些问题解决不了. 但是用 fis3 解决却比较自然, 所以用的就比较多而已.

webpack 大牌, 紧跟社区, 当然也想用, 方便和大家交流. 但是就像你说的, webpack实现本身有问题, 而我又想把 code split做的细一些, 我不能容忍冗余加载, 使用 webpack 的时候又不能完全避免冗余加载.

fis3 issue 比较多, 维护力度也不够. 这个确实比较可惜. 但是就我自己目前使用来看, 还没有遇到什么问题, 可能是我的用法都是比较大众的用法吧 😁

如果您有什么办法能解决我文章中的问题的话, 还请不吝告知, 因为我知道使用 fis3 是小众, 但是使用webpack时遇到的问题我也是真的很纠结

from ddfe-blog.

from ddfe-blog.

@ustbhuangyi想问下

线上动态注册组件时， 异步加载的组件单独编译打包的成一个文件的吧？，怎么把单独组件编译打包成一个文件的呢？

from ddfe-blog.

很棒！

from ddfe-blog.

业务组件我们是不建议使用 Vuex

不是基础组件吗？

from ddfe-blog.

@bigggge

你引用的句子后面还有一句

需要考虑到不同的使用方对 Vuex 内部变量的定义和使用是不相同的

当你的业务组件在不同业务场景，或者不同平台使用，或许可以称呼该业务组件为「基础组件」

如果硬要咬字，那么我们应该称呼与 Vuex 相关的「组件」为「业务容器」，不同的平台或者业务场景下，可能有不同的数据来源，也许会有不同的「业务容器」，但是也许会复用同一个基础的"业务组件"

from ddfe-blog.

666，感谢分享干货，已推荐到 SegmentFault 头条 (๑•̀ㅂ•́)و✧
链接如下：https://segmentfault.com/p/1210000011520846

from ddfe-blog.

mark

from ddfe-blog.

异步业务线如果用vue-router 并且异步业务线有子路由和动态路由怎么处理呢？ 其实你这里的动态路由只是用了动态组件去切换异步组件，如果异步组件自己有vue-router路由，你这个就没办法了

from ddfe-blog.

@krisyangjian 其实当时做的时候动态添加路由的 API vue-router 是没有提供的，所以我们自己实现了一套简单的，比较粗糙，但是异步组件也是可以动态添加路由的。现在新版的 vue-router 已经对外提供了这个 API，直接用就好了

from ddfe-blog.

@ustbhuangyi 你好，咨询一个问题，我看你们线下部署那个，利用scp2将home.html拷贝到指定目录，那线上部署的时候，静态资源应该都部署到CDN了吧，那index.html的又是如何处理的呢，也是在每个服务器上拷贝了一份吗？

from ddfe-blog.

不同业务说CSS是怎么合并的啊？

from ddfe-blog.

Vue.component(conf.name, (resolve, reject) => {
        loadScript(conf.src).then(() => {
          resolve(modules[id])
        }).catch(() => {
          reject()
        })
      })

想问下

1. 这里在线上动态注册组件时， conf.src 这个文件应该是组件单独编译打包的成一个文件的吧，所以这里你们是怎么把单独组件编译打包成一个文件的呢？是根据组件配置表遍历后逐个编译？
2. 本地开发环境 conf.src 这个引用的也是组件编译后的js文件还是类似 .vue 的源码文件？

同求解答，没能想出来各业务线组件打包成 js 后如何被引入，业务线 js 应该如何暴露出来？

from ddfe-blog.

20 年再看，这个其实就是「微前端」的早期实践啊

from ddfe-blog.