0.背景

上一篇中，使用cent os 服务器部署了scratch-gui。可以正常访问，但是打包后的lib.min.js 文件有20多M，对于远程服务器来说是个巨大压力。偶然间听到一个“JS压缩”的名词，搜索了好久才明白到底怎么用，一开始我以为是把打包出来的JS文件直接压缩，后来发现不完全是。下面说下几种优化的思路

1.优化思路

1.webpack： webpack 简单来说是一款打包工具（其实更复杂），在我们下载下来的scratch-gui中有一个webpack.config.js文件，这里面是一些配置信息，修改这些配置信息可以让我们打包出来的文件不同，比如，分开打包的思路，或者某些不用的文件不用打包等等。但是这个经过我的尝试，发现有一定的学习成本，且没有现成的修改方式，故暂时放弃这个方法。
2. JS压缩： 这个是偶然搜索到，后来终于搞明白，是使用gzip压缩的方式，经过压缩后，比较明显，且上手简单，几分钟就行，本文主要讲此方法。
3.CDN加速: 如果你都会上面两步，而且完美配置了后发现还是不能达到你想要的效果，那么你可能需要使用CDN加速这样的东西，此处暂时不详述。

2.开启gzip压缩

gzip压缩是在服务端开启的，本文用的是Cent OS + 宝塔+Apache。其开启方式如下：
打开Apache 的配置文件（nginx可以采用类似的方式，自行搜索即可），
去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释#
去掉 #LoadModule deflate_module modules/mod_deflate.so 前面的注释#
去掉 #LoadModule filter_module modules/mod_filter.so 前面的注释#
然后，在大概末尾的位置添加下面这段代码（代码并不唯一）

<IfModule deflate_module>#设置压缩级别
DeflateCompressionLevel 6
SetOutputFilter DEFLATE
# Don’t compress images and other   #排除不需要压缩的
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

其压缩后的效果如下：

可以看出原来20多M的JS文件，现在只有5.5M，体积相当于原来的四分之一。

3. 后记

虽然，体积压缩了不少，且经过我的测试，本地服务器几乎是秒开，但是从上面的图片可以看出，即使在体积只有5.5M的基础上，远程服务器加载还是需要45秒左右，这对于一个网站来说是个灾难。
当然，这也是下一步需要考虑的问题，还需要继续优化。

Scratch3 优化，开启压缩，提高访问速度相关推荐

oa服务器优化,如何优化OA以提高访问速度
如何优化OA以提高访问速度注意以下1-3步要斟酌执行,被删除的文件和附件不能再恢复,执行前请做好数据库和附件的备份 1在系统管理-系统日志管理-日志管理中点击"系统日志存档" . ...
【原创】如何优化一个网站使之提高访问速度--更新20120216
详细内容请查看本人博客 www.thinkidea.net 最近公司开始考核企业站下所有站点,首先从itpub开始进行.为此,开始学习关于如何优化一个网站使之提高访问速度这方面的知识.得知page s ...
探索神经网络的奥秘：如何优化模型和提高训练速度
探索神经网络的奥秘:如何优化模型和提高训练速度本文将阐述如何优化神经网络模型以提高训练速度,内容分为以下七个章节: 章节 1: 神经网络优化方法概述章节 2: 调整学习率章节 3: 网络架构改进 ...
优化网站性能提高网站速度访问速度的14条实践
相信互联网已经越来越成为人们生活中不可或缺的一部分.ajax,flex等等富客户端的应用使得人们越加"幸福"地体验着许多原先只能在C/S实现的功能.比如Google机会已经把最基本 ...
优化网站性能提高网站速度访问速度的14条实践(转)
相信互联网已经越来越成为人们生活中不可或缺的一部分.ajax,flex等等富客户端的应用使得人们越加"幸福"地体验着许多原先只能在C/S实现的功能.比如Google机会已经把最基本 ...
Flask-Assets 使用autoprefixer并压缩css/JS文件提高访问速度
扩展阅读 http://flask-assets.readthedocs.io/en/latest/ Flask-Assets实例学习 Flask-Assets中文参考 Flask-Assets ...
mysql怎么加快搜索_优化mysql数据库提高检索速度
在优化查询中,数据库应用(如MySQL)即意味着对工具的操作与使用.使用索引.使用EXPLAIN分析查询以及调整MySQL的内部配置可达到优化查询的目的. 任何一位数据库程序员都会有这样的体会:高通信 ...
Win10 WSL编译Android开启ccache(提高编译速度)
当你删掉out/target目录或者使用make clean清空输出重新编译源码的时候,编译时间通常都很漫长. 其实这个问题很容易解决,Android官方为我们带来了解决方案–ccache编译器缓存. ...
为提高访问速度建立本地文件服务器,html5 Application Cache——加快简历二次访问速度...
上篇博客(在github上写个人简历--最简单却又不容易的内容罗列)介绍了我在github上放的一个个人在线简历,有朋友看了后告诉我一个很大缺陷,使用github挺慢的,每次看的时候都很慢,第一反应这 ...
使用FeatureTask多线程优化in，提高查询速度
场景是这样的:使用in查询数据的时候,in的数量越多,效率越低,所以一个优化的思路是,缩小in查询的数量,用多线程的方式查询缩小数量后in的sql,并行查询. 直接上代码: public List&l ...

Scratch3 优化，开启压缩，提高访问速度

0.背景

1.优化思路

2.开启gzip压缩

3. 后记

Scratch3 优化，开启压缩，提高访问速度相关推荐

最新文章

热门文章