Как реализовать сжатие-webpack-плагин в спа Nuxt.js? - PullRequest
Новая
       50

Как реализовать сжатие-webpack-плагин в спа Nuxt.js?

0 голосов
/ 08 октября 2019

Запустив аудит Google Lighthouse на моем Nuxt.js pwa, который является SPA и в настоящее время обслуживается локально, Lighthouse сообщает мне, что я должен «Включить сжатие текста» («Ресурсы на основе текста должны обслуживаться со сжатием (gzip»). , deflate или brotli), чтобы минимизировать общее количество сетевых байтов. ")

Чтобы добиться этого, я пытаюсь реализовать плагин сжатия-веб-пакета (хотя я открыт для других подходов, если они лучше),но пока, похоже, ничего не изменилось.

Моя первая попытка выглядела так: 

// nuxt.config.js
//---------------
import CompressionWebpackPlugin from 'compression-webpack-plugin'
...
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // if (ctx.isDev) {
      //   config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      // }
      config.devtool = 'source-map'
    },
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(js|css|scss)$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }

, а моя вторая попытка была: 

// nuxt.config.js
//---------------
import CompressionWebpackPlugin from 'compression-webpack-plugin'
...
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(js|css|scss)$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  },
...
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // if (ctx.isDev) {
      //   config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      // }
      config.devtool = 'source-map'
    }
  }

Вв обоих случаях проект строится, но пакеты выглядят точно так же, как и раньше, и результаты Lighthouse также остаются неизменными.

Я надеюсь, что я просто неправильно настраиваю это, и один из вас, добрые люди, может мне помочьк созданию этой работы!

Дополнительная информация

Я нашел это: Как добавить плагины для веб-пакетов? и подумал, может ли это быть частьюрешение, но я просто не понимаю, как настроить это для использования плагин сжатия-веб-пакета.

Я также пытался реализовать nuxt-compress , но это также не имело никакого значения (и в любом случае это не мое предпочтительное решение.)

Заранее извиняюсь, если я упускаю что-то (я) очевидное, но я относительно новичок в этой стороне вещей и изо всех сил пытаюсь собрать все воедино!

...