有一个页面，因为js文件很大，所以第一次加载这个页面很慢，web服务器是nginx，希望页面能加载快点

Question

有一个页面，因为js文件很大，所以第一次加载这个页面很慢，web服务器是nginx，

希望页面能加载快点，请问在nginx如何配置，才能让这个页面加载快一下

或者如何修改页面，才能让这个页面加载快

Answer 1

1. 第一步马上就可以做的是把js引用放到body最后，加快整个页面的展示速度。
2. JS文件很大的话，就按功能及依赖关系分成几个文件来加载。
3. 那个js文件中的内容如果不是对每个页面都必要，建议按需加载，可以使用requirejs

Answer 2

提供几个快速的解决方案：

1. 尽可能压缩代码，不生成 map
2. nginx 开启 gzip，可以提升挺多的
3. 上传到 cdn，比如七牛云
4. 优化代码结构，按需加载
5. 拆分公共代码和业务代码，公共代码往后可以不更新，使用 http 缓存

上面提到的很多可以使用 webpack、gulp 之类的解决，当然看你项目工程是怎样的了。

Answer 3

webpack开启压缩试试,如图

1. npm install --save-dev compression-webpack-plugin
2. productionGzip: false, false 改为 true

Answer 4

你问题能问的再大点吗？

这就好像你告诉医生说你不舒服，让医生给你开方子一样。

我说一下碰到这种问题的思路吧。

首先你的问题应该是第一次加载这个页面很慢.

那么加载速度慢的原因究竟是什么呢？
要知道加载速度慢的原因，就要知道浏览器渲染网页的原理。

我这简单说一下，浏览器从开始到渲染出来大体分为两个过程：

1. 请求HTML
2. 解析HTML，如果碰到CSS或者JS（不考虑异步脚本）就会等待其下载并解析

因此考虑从下载速度和解析速度来考虑优化。

提高下载速度很容易想到的是把大文件分为多个小文件。但是这种优化方式并不一定总是成功的，你要知道它可以提高性能的原理，就不难理解。

提高解析速度我们也很容易想到不要写复杂JS运算，或者将复杂运算放到RAF或者RIC中。但是这都不重要，
重要的是你知道原理，知道在不同的情况下作出取舍

详细可以看我的这篇文章 ，是关于前端性能优化的,地址：https://github.com/azl3979858...