泛微Ecology 9代码块开发框架:压缩JS和CSS

问题

前端工程中,一般最佳实践是在生产环境中压缩HTML、CSS、JS代码,提高网络传输性能。我们的软件项目仅面向公司内部用户,在公司内网中运行,一般网络质量很好,不用担心传输问题,但在通过VPN接入内网、通过外网IP直接访问OA的场景下,也无法保证网络总是高质量。因此,我们遵循这一最佳实践,对生产环境的脚本文件进行压缩。由于开发环境的脚本文件需要在浏览器中阅读、调试,因此不压缩。

实现

开发框架支持多环境和增加环境,const ENVS = ["dev", "prod"];定义了所有环境的标识。我们再通过const COMPRESS_ENVS = ["prod"];定义哪些环境需要压缩。

压缩JS

安装依赖uglify-js,实现JS的压缩。

压缩时机:在替换模板中的CSS和JS之后做压缩,而不是直接对index.js和config.envenv.js或其JSX编译结果做压缩,因为模板中的代码也是JS,因此在替换后压缩才能确保压缩到所有JS代码。

压缩CSS

安装依赖clean-css,实现CSS的压缩。

压缩时机:在替换模板中的CSS之前做压缩。CSS在模板中是JS中的一个字符串,JS压缩并不会同时压缩CSS,因此要在替换之前先单独压缩CSS,再替换到模板中。