nuxt打包路劲问题_实战减小 Vue 项目的打包体积

本文内容使用 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 等