html压缩
1、在线压缩工具。/jscompress（现代化前端构建过程中基本不会使用，一般会选择构建构建webpack、Gulp、FIS 3）2、nodejs提供的html-minifier工具（可以进行参数配置，如：是否压缩注释）3、后端模板引擎渲染压缩注：nodejs拓展性比较多，首先它可以作为构建工具（在构建层压缩）、也可做为服务端语言可在服务端进行压缩
css压缩
作用：删除无用代码、语义合并1、在线压缩工具。（现代化前端构建过程中基本不会使用，一般会选择构建构建webpack、Gulp、FIS 3）2、使用html-minifier对html中的css进行压缩3、使用clean-css压缩
js压缩和混乱
作用：无效字符删除剔除注释代码语义的缩短和优化代码保护1、在线压缩工具。（现代化前端构建过程中基本不会使用，一般会选择构建构建webpack、Gulp、FIS 3）2、使用html-minifier对html中的js进行压缩3、使用uglifyjs2压缩
文件合并
上图右侧不合并请求的缺点
文件合并也存在问题：（同类文件都合并一块的话）
首屏渲染问题缓存失效
首屏渲染问题：场景大部分出现在现代化前端框架使用过程中（如：vue、angular如果没有做启动服务端渲染的情况下，是将整个渲染过程通过框架来接管的，所以它要是渲染的话，必须要把框架代码加载完成之后才能进行渲染，如果框架代码被一个非常大的框js代码合并在一起了，这个渲染就会完全依赖于与这个文件合并之后js文件来进行，就会出现首屏渲染问题),
缓存失效问题：js文件缓存，比如a、b、c三个js文件，合并为d.js文件。
合并前：a文件改变只会造成a文件缓存失效。
合并后：原本a文件内容改变，会造成d.js文件全部内容缓存失效
文件合并比较适合用的场景：公共库的合并、不同页面的合并、见机行事，随机应变
真实业务场景中我们希望当单应用的某个页面被路由到的时候，我们才去加载那个页面的组件才去请求该页面是 js。也就是将不同页面的js分别打包。在webpack、FIS等构建工具中都是可以实现的，就是异步加载组件结合现在的框架都有很好的实现方式
1、在线网站2、在构建阶段使用nodejs实现文件合并（就看使用什么样的构建工具了，如果使用Gulp就可以使用Gulp相关插件进行合并。webpack配置entry及output。webpack本身机制就会根据入口文件进行相关文件依赖的分析，从而将这个文件入口所依赖的文件自动打成一个包）
开启gzip总结：
最好结合构建工具进行压缩
减少http请求数量
减少请求资源的大小
如果觉得《代码合并工具_资源合并与压缩》对你有帮助，请点赞、收藏，并留下你的观点哦！
