html - 带有 TailwindCSS 内存泄漏的 HTML

Question

再会，

我目前正在创建一个简单的图片库风格的 CRUD 网站，用于练习 Laravel 和学习 TailwindCSS。一直困扰我的项目的问题是我无法追查到的令人难以置信的内存泄漏。每当我刷新页面时，RAM 使用量都会增加大约 150 MB。这继续令人作呕，直到我的计算机内存完全堵塞并且我必须关闭选项卡，然后我重新打开它并重新开始循环。

更准确地说，这些是我采取的步骤：

1. 在 localhost 上打开页面（具体为 127.0.0.1:8000）；
2. 对 HTML 进行一些更改（尽管泄漏出现是不必要的）；
3. 刷新;
4. 任务管理器显示 Firefox 进程 RAM 使用量增加了约 150 MB；
5. 选项卡继续使用 RAM 到 3GB+，此时我结束选项卡进程；
6. 恢复选项卡；
7. 重复步骤 2-6。

我将 TailwindCSS 2.1.4 与 Laravel 8.46 和 Firefox 89.0.1 一起使用。我还没有编译我的 TailwindCSS 源文件，我的页面当前包含 HTML、CSS 和 Blade 指令。检查开发工具中的内存选项卡，数字不会增长，并且每次刷新都保持不变——我附上了该选项卡的屏幕截图： Firefox 开发工具的内存选项卡。

我在哪里转向错误？此外，也许有更有效的方法来预览更改而无需每次都刷新页面？

感谢您抽出宝贵时间。

编辑：我还包括我的webpack.mix.js、composer.json和packages.json文件：

webpack.mix.js：

 const mix = require('laravel-mix');
    mix.js('resources/js/app.js', 'public/js').postCss('resources /css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

包.json：

 {
        "private": true,
        "scripts": {
            "dev": "npm run development",
            "development": "mix",
            "watch": "mix watch",
            "watch-poll": "mix watch -- --watch-options-poll=1000",
            "hot": "mix watch --hot",
            "prod": "npm run production",
            "production": "mix --production",
            "build-css": "tailwindcss build cssSrc/styles.css -o public/tailwind.css"
        },
        "devDependencies": {
            "@tailwindcss/forms": "^0.2.1",
            "alpinejs": "^2.7.3",
            "autoprefixer": "^10.1.0",
            "axios": "^0.21",
            "laravel-mix": "^6.0.6",
            "lodash": "^4.17.19",
            "postcss": "^8.2.1",
            "postcss-import": "^12.0.1",
            "tailwindcss": "^2.1.4"
        },
        "dependencies": {
            "colorette": "^1.2.0"
        },
        "name": "Practice",
        "description": "Practice website.",
        "version": "1.0.0",
        "main": "webpack.mix.js",
        "directories": {
            "test": "tests"
        },
        "repository": {
            "type": "git",
            "url": "(my GitHub page)"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "bugs": {
            "url": "(my GitHub page)"
        },
        "homepage": "(my GitHub page)"
    }

作曲家.json：

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "require": {
        "php": "^7.3|^8.0",
        "fideloper/proxy": "^4.4",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/breeze": "^1.3",
        "laravel/framework": "^8.0",
        "laravel/tinker": "^2.5",
        "laravel/ui": "^3.3"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.2",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3.3"
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "minimum-stability": "dev",
    "prefer-stable": true,
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    }
}

标签： htmlnpmfirefoxmemory-leakstailwind-css