代码合并工具_资源合并与压缩

1. html压缩

1、在线压缩工具。https://tool.oschina.net/jscompress
（现代化前端构建过程中基本不会使用，一般会选择构建构建webpack、Gulp、FIS 3）
2、nodejs提供的html-minifier工具（可以进行参数配置，如：是否压缩注释）
3、后端模板引擎渲染压缩
注：nodejs拓展性比较多，首先它可以作为构建工具（在构建层压缩）、
也可做为服务端语言可在服务端进行压缩

1. css压缩

作用：删除无用代码、语义合并
1、在线压缩工具。
（现代化前端构建过程中基本不会使用，一般会选择构建构建webpack、Gulp、FIS 3）
2、使用html-minifier对html中的css进行压缩
3、使用clean-css压缩

1. js压缩和混乱

作用：
无效字符删除
剔除注释
代码语义的缩短和优化
代码保护
1、在线压缩工具。
（现代化前端构建过程中基本不会使用，一般会选择构建构建webpack、Gulp、FIS 3）
2、使用html-minifier对html中的js进行压缩
3、使用uglifyjs2压缩

1. 文件合并

上图右侧不合并请求的缺点

文件合并也存在问题：（同类文件都合并一块的话）

1. 首屏渲染问题
2. 缓存失效

首屏渲染问题：场景大部分出现在现代化前端框架使用过程中（如：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本身机制就会根据入口文件进行相关文件依赖的分析，
从而将这个文件入口所依赖的文件自动打成一个包）

1. 开启gzip
2. 总结：

最好结合构建工具进行压缩

减少http请求数量

减少请求资源的大小