网站中有三个js文件大小超过100KB,超级影响加载速度,想问怎样优化?

JavaScript031

网站中有三个js文件大小超过100KB,超级影响加载速度,想问怎样优化?,第1张

1. 将你的JS文件进行压缩,百度一下,工具一把

2. 服务器端开启gzip压缩

3. 如果你是3个单独的JS,那么你可以合成1个文件,减少请求次数

4. 将你的<script>标签写在页面底部<body>标签结束之前

5. 检查你的js中是否存在特别耗时的逻辑,因为脚本加载时阻塞式的,它会加载完并执行完之后,才会加载其它资源,因此慢并不一定是文件大,也可能是文件执行花了很长时间

6. 如果还是觉得很慢,你可以使用动态加载,不要直接在页面中写<script>标签,而是动态创建一个<script>将该脚本引进来,这样的加载方式是非阻塞式的,不会影响其它资源加载。

7. 上面方法全用了,还是觉得很慢,那你应该检查你的服务器和网络情况,因为按理来说100多kb的脚本不至于慢到不可接受的地步。

8. 将页面中的资源分散到多个一级或二级域名,因为浏览器对同一个域名同时加载的资源数量是有限制的

9. 如果你还是觉得很慢,那就玩些高级玩意儿吧(如使用CDN加速等)

10. 上面方法都试过,还是不奏效?那我也没辙了,除非能现场分析。

js代码执行速度 很大程度上依赖浏览器的引擎 不同浏览器跑 速度可能会差很多

然后就是算法的时间复杂度 和处理的数据量

还有就是多次操作dom也相当耗时

你要分析下你的代码慢的原因

是循环套循环了?

还是说逻辑太复杂了

如果多次操作dom 导致页面reflow次数过多

渲染次数过多 也可能给你感觉很慢

第一步安装插件 compression-webpack-plugin

npm install --save-dev compression-webpack-plugin

第二步修改vue.config.js配置文件

第三步修改nginx配置

最后看下效果

到此结束!如果遇到安装插件后 npm run build 报错 就行将插件版本降低 插件版本过高的原因 我用的是5.1.1