前言

小编在使用 nuxt.js 做移动端项目的时候遇到了加载缓慢的问题，为解决这个问题也花了不少时间，现将解决方案总结与大家分享，使用的 nuxt 版本为 2.15.3。解决思路如下：

大文件拆分
文件压缩

解决方案

开启可视化分析构建后的打包文件

// nuxt.config.js
module.exports = {
  build: {
    analyze: true
    // or
    analyze: {
      analyzerMode: 'static'
    }
  }
}

提示： 也可通过 nuxt build --analyze 或 nuxt build -a 命令来启用该分析器进行编译构建。执行npm run build得到结果如下：

从图上看代码总大小为：173.49KB

lightHouse 评分如下：

配置 optimization.splitChunks

注意： 这里要根据实际情况确定是否使用 optimization.splitChunks ，如果项目中没有很大的文件影响加载速度，可以不用 optimization.splitChunks。例如：小编用的演示项目就没有多少代码，用了 optimization.splitChunks 之后 lightHouse 评分反而下降了。

// nuxt.config.js
module.exports = {
  build: {
    optimization: {
      splitChunks: {
        // 生成 chunk 的最小体积（以 bytes 为单位）
        minSize: 30000,
        // https://webpack.docschina.org/plugins/split-chunks-plugin/
        maxSize: 250000,
      },
    },
  }
}

执行npm run build得到结果如下：

从图上看代码总大小为：177.38KB，但文件个数比没加 optimization.splitChunks 前多了，单个文件体积比之前要小。

lightHouse 评分如下：

使用 gzip 压纹

安装 compression-webpack-plugin
npm i --save-dev compression-webpack-plugin@^6.1.1
使用 compression-webpack-plugin

// nuxt.config.js
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  build: {
    plugins: [
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css/, // 匹配文件名
        threshold: 10240, // 对超过10kb的数据进行压缩
        deleteOriginalAssets: false, // 是否删除原文件
      }),
    ],
  }
}

打包
npm run build
然后就会看到 dist/client 下多出了 .gz 的文件。

部署

部署需要node环境，pm2（Nodejs的进程管理工具），nginx（用来支持gzip，如果没有用gzip可以不用准备）

部署所需要的文件
.nuxt
package.json
static
nuxt.config.js
router
将部署所需要的文件上传到服务器，安装依赖
npm install
启动服务
pm2 start npm --name convenient-service-h5 -i 0 -- run start
pm2 start npm --name 进程名称 -i 程序数量（0 表示和 cup 核数一样多） -- npm 的参数

tips: 重启服务
pm2 restart convenient-service-h5
pm2 start 进程名称（也可以是进程 id）

注意： 如果没有用 gzip，到此部署完成。

配置 nginx
在nginx根路径下新建 conf/gzip.conf 文件如下：

gzip on;
gzip_comp_level 5; 
gzip_min_length 1k; 
gzip_buffers 4 16k; 
gzip_proxied any;
gzip_types 
  application/javascript
  application/x-javascript
  text/javascript
  text/css
  text/xml
  application/xhtml+xml
  application/xml
  application/atom+xml
  application/rdf+xml
  application/rss+xml
  application/geo+json
  application/json
  application/ld+json
  application/manifest+json
  application/x-web-app-manifest+json
  image/svg+xml
  text/x-cross-domain-policy;
gzip_static on;  
gzip_disable "MSIE [1-6]\.";

# gzip on: 开启gzip
# gzip_comp_level 5: 压缩等级, 压缩等级分为1-9, 数字越大压缩越彻底, 但越消耗CPU, 一般5就足够了, 再高没必要
# gzip_min_length 1k: 多大的文件才进行压缩, 如果文件小于1K完全没必要压缩
# gzip_buffers 4 16k: 压缩时的缓存区大小, 可以理解为工作车间的大小
# gzip_proxied any: 对代理文件进行压缩, nginx一般是作为反向代理, 这个就是告诉nginx对它反代的服务器文件进行压缩
# gzip_types: 需要被gzip的mime类型
# gzip_static on: 对静态文件进行gzip压缩, 是用来配合gzip_types来使用, 单独使用无效
# gzip_disable "MSIE [1-6]\.": 对IE6和以下的浏览器不开启gzip压缩, 因为IE6以前的浏览器不支持gzip

nginx.conf 文件内容如下：

user  root owner;

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    # 扩展配置
    include conf/*.conf;

    server {
        listen       80;
        server_name  localhost;

        location / {
            proxy_pass              http://localhost:8080/; # pm2 启动的服务的地址
            proxy_set_header        Host 127.0.0.1;
            proxy_set_header        X-Real-IP $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    include servers/*;
}

启动 nginx，访问 nginx 启动的服务地址，看到如下内容说明成功了：

tips: linux nginx命令

# sudo nginx 启动
# sudo nginx -s reload 重启
# sudo nginx -s stop 停止

至此，项目部署完成。

用lightHouse来做一下评分（测试的是 nginx 启的服务地址），评价如下：

说明： 小编这里没有用 optimization.splitChunks

nuxt加载优化及部署

前言

解决方案

开启可视化分析构建后的打包文件

配置 optimization.splitChunks

使用 gzip 压纹

部署