开发大型spa应用时编译慢探讨

#1

环境：

  • react+webpack+babel
  • sass单独编译为css
  • 使用webpack按需加载分包功能
  • cnpm本地npm仓库

开启watch功能，目前第一次编译时间为 3min ，修改js代码编译需要 6s。
后续代码量会持续增加，编译速度问题急需解决。
如何在不影响功能的前提下提升编译速度？大家的开发环境都是什么样的？

1 Like
#2

这个是我们的编译配置, 不过分包跟模块和代码量方面跟简聊不同, 这里只是单独的组件:


简聊的开发编译大概 10s 多, 生产环境编译大概一分钟.

也希望找到更好的办法可以提高一下性能…

#3

唯一想到的就是npm分包编译开发，但是在webpack动态分包方面不知道会不会影响。另外npm分包过多不方便维护

#4

上ssd :joy:

#5

:sleeping:

#6

与楼主环境配置基本一样，只是css用的是less，目前entrys一共22个，1个CommonChunk，采用webpack-middleware编译，首次编译40s左右，修改js代码时没有任何延迟感觉。entrys未压缩平均150KB，打包时加上uglify也就1分钟左右

#7

我的entry目前就一个，使用webpack动态分包。使用了sourcemap后单个js能达到5M，压缩后在500k

#8

一个的话肯定会很慢吧，如果可以的话，按route拆成若干小entry，然后用require.ensure引入。实在拆不了也可以把vendor独立出来，减少编译时间

#9

还有一种思路不知道对不对。大型 spa 其实可以拆分成小项目啊。没必要依赖 webpack 的 multientry，webpack 挺复杂的，万一出错也很难定位问题。完全可以用 manual 的方式。

我目前在某个项目中是这么做的，用户的页面和管理员的配置是分成两个 repo 的。这样我就不用担心修改一个 repo 会影响到另一个。这种完全的隔离也适合团队分工。

当然，component 和 libs 可以共享，这些又可以拆分成新的 repo 来维护（不过我一直认为提前抽象不省事，组件需要在项目中打磨再提取）

大型网站其实就是这么做的，虽然是一个一级域名下面的页面，但是每个链接其实都是子站点。而且后端分的更细，SOA，无数个服务。

1 Like
#10

编译的时候起来活动下不行吗

#11

使用 sourcemap 会影响编译速度，我现在都是设置为 eval！

#12

wbpack+babel+sass
开发首次编译30s左右，生产环境编译，主要是压缩，1分10秒左右

实时开发阶段的编译，几乎无感知，保存后，直接切到浏览器，就已经编译好了，
用的 webpack-dev-server

另外单独提一点，ruby 版的 sass 编译非常慢，得换成 node-sass ，能快上很多