问题
前端工程中,一般最佳实践是在生产环境中压缩HTML、CSS、JS代码,提高网络传输性能。我们的软件项目仅面向公司内部用户,在公司内网中运行,一般网络质量很好,不用担心传输问题,但在通过VPN接入内网、通过外网IP直接访问OA的场景下,也无法保证网络总是高质量。因此,我们遵循这一最佳实践,对生产环境的脚本文件进行压缩。由于开发环境的脚本文件需要在浏览器中阅读、调试,因此不压缩。
实现
开发框架支持多环境和增加环境,const ENVS = ["dev", "prod"];定义了所有环境的标识。我们再通过const COMPRESS_ENVS = ["prod"];定义哪些环境需要压缩。
压缩JS
安装依赖uglify-js,实现JS的压缩。
压缩时机:在替换模板中的CSS和JS之后做压缩,而不是直接对index.js和config..js或其JSX编译结果做压缩,因为模板中的代码也是JS,因此在替换后压缩才能确保压缩到所有JS代码。
压缩CSS
安装依赖clean-css,实现CSS的压缩。
压缩时机:在替换模板中的CSS之前做压缩。CSS在模板中是JS中的一个字符串,JS压缩并不会同时压缩CSS,因此要在替换之前先单独压缩CSS,再替换到模板中。