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: [],
}
誰かが助けてくれることを願っています!