优化前：

优化后：

1. 按需引入UI框架，我这里使用的是Element-UI

安装依赖（按需引入）

npm i babel-plugin-component 
// or 
yarn add babel-plugin-component

在plugins下的element-ui.js写入

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(Element, { locale })

在nuxt.config.js中写入

css: [
    'element-ui/lib/theme-chalk/index.css'
  ],
  plugins: [
    '@/plugins/element-ui',
  ]
  build: {
    vendor: ['element-ui'],
    transpile: [/^element-ui/],
    babel: {
      plugins: [
        [
          'component',
          {
            libraryName: 'element-ui',
            styleLibraryName: 'theme-chalk'
          }
        ]
      ]
    },
  }

2. 删除没有使用的依赖

就是把没有使用的npm包卸载掉
npm uninstall 包名

3. 请求分开服务端渲染及客户端渲染，并尽可能的减少请求

通用接口：尽量使用Vuex store

服务端渲染：写在asyncData中

客户端渲染：写在mounted中

4. 配置nginx的Gzip、http2

http {

  # gzip模块设置，使用 gzip 压缩可以降低网站带宽消耗，同时提升访问速度。
  gzip  on;                     #开启gzip
  gzip_min_length  1k;          #最小压缩大小
  gzip_buffers     4 16k;       #压缩缓冲区
  gzip_http_version 1.0;        #压缩版本
  gzip_comp_level 2;            #压缩等级
  #压缩类型
  gzip_types   text/plain text/css text/xml text/javascript application/json application/x-   javascript application/xml application/xml+rss font/ttf font/otf image/svg+xml;
  
  server {
    listen 443 ssl http2;
    # ...
  }
  
  # ...
}

5. nuxt项目也开启gzip、br

安装nuxt-precompress

npm i nuxt-precompress
// or
yarn add nuxt-precompress

在nuxt.config.js中写入

module.exports = {
  // ...
  modules: [
    'nuxt-precompress',
  ],
  nuxtPrecompress: {
    gzip: {
      enabled: true,
      filename: '[path].gz[query]',
      threshold: 10240,
      minRatio: 0.8,
      compressionOptions: { level: 9 },
    },
    brotli: {
      enabled: true,
      filename: '[path].br[query]',
      compressionOptions: { level: 11 },
      threshold: 10240,
      minRatio: 0.8,
    },
    enabled: true, 
    report: false,
    test: /\.(js|css|html|txt|xml|svg)$/,
    // Serving options
    middleware: {
      enabled: true,
      enabledStatic: true,
      encodingsPriority: ['br', 'gzip'],
    },
  },
  // ...
}

npm run build后，打开.nuxt > dist > client，看一下是否有.br或者.gz结尾，说明成功。

6. nuxt再次压缩包体积CompressionPlugin及optimization

安装compression-webpack-plugin

npm i compression-webpack-plugin
// or
yarn add 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 // 是否删除原文件
      })
    ],
    optimization: {
      minimize: true,
      splitChunks: {
        chunks: 'all',
        automaticNameDelimiter: '.',
        name: true,
        minSize: 10000,
        maxSize: 244000,
        cacheGroups: {
          vendor: {
            name: 'node_vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'all',
            maxSize: 244000
          },
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          },
          commons: {
            test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|vue-meta|core-js|@babel\/runtime|axios|webpack|setimmediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)[\\/]/,
            chunks: 'all',
            priority: 10,
            name: true
          }
        }
      }
    },
  }
  // ...
}

以上做了一个简单的优化，应该还可以继续优化

sgling

友情链接