本文内容使用 NuxtJS 2.14.1 (其中 vue 为 2.6.11, webpack 为 4.44.1) 和 Ant Design of Vue 1.6.4。因为版本和不同类库造成的差异请大家多进行搜索。
问题
用 NuxtJS 开发博客(https://bun.plus)以来,一直有一些体验上的问题,这次正好有时间,便来优化一下,目前的问题主要有:
依赖的 js css 文件较大
服务器端渲染生成的 HTML 较大
导致访问速度较慢,特别是首次加载。
依赖的 js css 文件较大
首屏加载过慢有很多原因,最常见的就是网页依赖的资源(例如 vue 和各种类库的 js)太多或者太大,浏览器需要花一些时间才能将它们下载下来。
通过“开发人员工具”查看加载时间
打开浏览器的 开发人员工具
- 网络
,然后访问网站,来查看网页需要加载哪些东西,以及它们的大小和耗时。
查看时需要勾选
禁用缓存
来模拟首次到访网站的浏览者的真实状态。
如果界面和我的略有不同,可以点击右上角齿轮图标按钮,勾选使用大请求行
。
通过 Size 列可以看到,60a2df....js
这个 js 文件大小为 594 k(相当于半兆),由于采用了 gzip 压缩,它的原始大小为 2.4MB,是一个相当大的文件了,而且花了5秒才下载完成,体验非常不好。
分析文件内容
由于这个文件在 /_nuxt
下,且名字为随机生成,这应该是 webpack 打包生成的文件。NuxtJS 内置了 webpack-bundle-analyzer
来分析打包后的文件(https://zh.nuxtjs.org/api/configuration-build/#analyze)。
打开 nuxt.config.js
并找到 build
属性,添加 analyze: true
以启用分析模式:
module.exports = {
build: {
analyze: true
}
}
然后在控制台中输入 npx nuxt build --analyze</