1

webpacker と tailwind を使用する Rails 6.1 アプリがあります。ページの読み込み速度テストで読み込み速度が遅く、「未使用の JavaScript を減らす」ことを提案されています。補足:「未使用の CSS を削減する」ことも提案しています。したがって、パージは機能しないようです。しかし、ページ読み込み速度テストを実行するページでは、chartkick/chart.js も使用されていません。そのため、ページでさえ使用されていないにもかかわらず、すべての JS ライブラリをロードしているようです。

ここに私の packs/application.js ファイルがあります:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "chartkick/chart.js"
import ahoy from "ahoy.js"
import { initMapbox } from '../packs/init_mapbox'

require("stylesheets/application.scss")
require("../stylesheets/components/pagination.scss")
require("../stylesheets/components/vacancy_description.scss")


Rails.start()
Turbolinks.start()
ActiveStorage.start()

document.addEventListener('turbolinks:load', () => {
  initMapbox();
})

ここに私の tailwind.config.js ファイルがあります:

const colors = require('tailwindcss/colors')

module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === "production"
    content: ['./app/views/**/*.html.erb', './app/javascript/**/*.js',],
  },

  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
      green: colors.emerald
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

誰かが助けてくれることを願っています!

4

0 に答える 0