背景,我司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模式下替换掉常用的通配符,减少监听及打包文件
先上图
等views下面业务模块有50+,widget目录下面有20个左右。。。那编译一次真的是呵呵呵
所以我们增加了一个.localBuildConfig.js
让同学们只编译/监听自己想要的文件即可,同时在编译log中给予提示