我这边有一个项目用的是create-react-app比较老的版本,webpack4.x
一开始我只关注启动速度,启动是在是过于慢了,第一次启动要5分钟,打包其实也慢,慢的时候要3,4分钟。但是因为我一般不会在本地打包,而是代码合到测试环境就会自动构建了。所以对开发体验的影响倒不是很大。
先是优化了启动速度,从5分钟优化到有缓存的情况下1分钟启动。(因为webpack是单线程,速度其实和cpu单核性能有关,是我这台电脑i3-10100上的耗时)
如果能开多线程会更快一些,因为create-react-app不是很好配置,所以没有搞多线程。
- 主要是关闭了eslint检查,优化了2分钟
- 移除CaseSensitivePathsPlugin插件,优化了1分钟
- HardSourceWebpackPlugin 是一个缓存插件,有缓存的情况优化1分钟。
typescript检查就没必要关了,因为这个检查是多线程的,关了也只能优化10s左右,影响不大。
打包是我今天才突然发现的问题,因为新项目我换用vite打包了,vite依赖的node版本比较高,所以CI/CD流程需要调整,然后突然给我说打包的文件比之前少很多。
然后我一看,原来的项目打包大小都到40mb,很明显有很多sourcemap文件是不需要的。
到网上查了一下,有一个方法比较方便,就是配置.env
文件就可以
在根目录下创建一个.env.production
文件
加一句GENERATE_SOURCEMAP = false
这样js和css的sourcemap就都不会输出了。
这下我发现打包速度甚至40s左右,之前是2min30s。
网友评论