前端项目gulp编译工具打包慢怎么办?

背景,我司m/www项目是套php-twig模板的写法,以HTML为入口。是gulp+webpack的打包方式,支持less/babel/polyfill/nodemon/browserSync/本地mock-server(express)等等,但是从最初几个业务模块到现在50+的业务模板,本地开发打包起来慢的要死。。。每次dev开发 50+监听 要20s才能编译成功,优化后再次回到毫秒级的开发体验

合理使用gulp/webpack缓存插件

下面几个插件,按需索取哈,反正我是都有了。
有多文件用的,有对dev-watch时用的,都有效果。

gulp-cache 缓存文件

https://www.npmjs.com/package/gulp-cache

gulp-cache & gulp-remember 内存缓存好兄弟

https://www.npmjs.com/package/gulp-cached
https://www.npmjs.com/package/gulp-remember

happypack Webpack 4 以下版本强烈需要

https://www.npmjs.com/package/happypack

优化编译代码

gulp.watch增加interval配置,减少100ms轮询,降低cpu消耗

const watchOption = { interval: 750 }
gulp.watch('监听文件',watchOption,'task名')

配置本地.localBuildConfig.js文件,dev模式下替换掉常用的通配符,减少监听及打包文件

先上图


大部分gulp的编译监听都是这样写

等views下面业务模块有50+,widget目录下面有20个左右。。。那编译一次真的是呵呵呵
所以我们增加了一个.localBuildConfig.js


前端项目gulp编译工具打包慢怎么办?_第1张图片
image.png

让同学们只编译/监听自己想要的文件即可,同时在编译log中给予提示


没有配置 .localBuildConfig.js 文件

配置了 .localBuildConfig.js 文件

你可能感兴趣的:(前端项目gulp编译工具打包慢怎么办?)