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请求数量
减少请求资源的大小
如果觉得《代码合并工具_资源合并与压缩》对你有帮助,请点赞、收藏,并留下你的观点哦!