优化nuxt打包后项目文件过大

在使用nuxt.js来做项目的时候，遇到了加载缓慢的问题。解决思路如下

1. 图片压缩

2. 大文件拆分

3. 文件压缩

解决方案

1. 使用第三方软件来压缩图片，比如 tinypng，压缩后分辨率不变，肉眼看不失真。

2. 大文件拆分

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

使用文档

nuxt.config.js

module.export = {
build: {
 analyze: true
 // or
 analyze: {
 analyzerMode: 'static'
 }
 }
}

提示： 也可以通过nuxt build --analyze或者nuxt build -a命令来启用，打包后如下：

image-20230213143135528.png

配置optimization.splitChunks

注意：这里需要根据自身情况确定是否使用，如果项目没有什么大文件影响加载速度可以不适用

nuxt.config.js

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

这是我开启前的评分

image.png

这是开启后的评分

image.png

使用gzip压缩

1. 安装compression-webpack-plugin

   npm i compression-webpack-plugin --save-dev

2. 使用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, // 是否删除原文件
     }),
   ],
 }
}

3. 打包

   npm run build

   打包之后，多出来很多.gz文件

   image-20230213144610201.png

部署优化

1. 部署环境需要node、pm2(Nodejs进程管理工具)、nginx(反向代理)

2. 部署需要的文件(npm run build后)

   1. .nuxt

   2. package.json

   3. static

   4. nuxt.config.js

3. 把上面的文件上传到服务器上，安装依赖

   npm install

4. 改良pm2调用nuxt

   1. 在nuxt项目根目录下新建ecosystem.config.js

 module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      exec_mode: 'cluster',
      instances: '1', // 如果是官网，一般cpu是几核就启动几个 可以用instances: 'Max'
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start'
    }
  ]
}

2. 启动 pm2 start即可

3. 使用nginx反向代理到localhost:3000即可访问 默认3000端口