- html压缩
1、在线压缩工具。https://tool.oschina.net/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压缩
- 文件合并
![5e0be685753834ed20835801c0137c54.png](https://i-blog.csdnimg.cn/blog_migrate/689ad2bb7a6b655b4d500977fe00f09c.jpeg)
上图右侧不合并请求的缺点
文件合并也存在问题:(同类文件都合并一块的话)
- 首屏渲染问题
- 缓存失效
首屏渲染问题:场景大部分出现在现代化前端框架使用过程中(如: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请求数量
减少请求资源的大小
![02f48d0d646fd24cfe287b9f3aeb676c.png](https://i-blog.csdnimg.cn/blog_migrate/ff6c3df3b28ea6442eb16e5c399fdbce.jpeg)