feat: build hashed static files to renew browser cache
- replace rollup config with vitejs - use vite dev server during development to take advantage of hot module replacement (HMR) - add vite service using Vite library to load css and js assets - update package.json scripts and remove unnecessary dependencies - update scripts/bundle-prepare.sh closes #107
4
.babelrc
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"presets": ["@babel/preset-typescript", "@babel/preset-env"],
|
||||
"plugins": ["@babel/plugin-proposal-class-properties"]
|
||||
}
|
|
@ -5,12 +5,12 @@
|
|||
"dockerComposeFile": ["../docker-compose.yml", "./docker-compose.yml"],
|
||||
"service": "app",
|
||||
"workspaceFolder": "/castopod-host",
|
||||
"postCreateCommand": "composer install && npm install && npm run build:dev",
|
||||
"postStartCommand": "crontab ./crontab && cron && php spark serve --host 0.0.0.0",
|
||||
"postCreateCommand": "composer install && npm install && npm run build:static",
|
||||
"postStartCommand": "crontab ./crontab && cron && php spark serve --host 0.0.0.0 & npm run dev",
|
||||
"postAttachCommand": "crontab ./crontab && service cron reload",
|
||||
"shutdownAction": "stopCompose",
|
||||
"settings": {
|
||||
"terminal.integrated.defaultProfile.linux": "/bin/bash",
|
||||
"terminal.integrated.defaultProfile.linux": "bash",
|
||||
"editor.formatOnSave": true,
|
||||
"[php]": {
|
||||
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
|
||||
|
|
|
@ -47,7 +47,8 @@ performance improvements ⚡.
|
|||
- cf.
|
||||
[I haven't updated my instance in a long time… What should I do?](#i-havent-updated-my-instance-in-a-long-time-what-should-i-do)
|
||||
|
||||
5. ✨ Enjoy your fresh instance, you're all done!
|
||||
5. If you are using redis, clear your cache.
|
||||
6. ✨ Enjoy your fresh instance, you're all done!
|
||||
|
||||
## Automatic update instructions
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@ use App\Authorization\PermissionModel;
|
|||
use App\Libraries\Breadcrumb;
|
||||
use App\Libraries\Negotiate;
|
||||
use App\Libraries\Router;
|
||||
use App\Libraries\Vite;
|
||||
use App\Models\UserModel;
|
||||
use CodeIgniter\Config\BaseService;
|
||||
use CodeIgniter\HTTP\Request;
|
||||
|
@ -138,4 +139,13 @@ class Services extends BaseService
|
|||
|
||||
return new Breadcrumb();
|
||||
}
|
||||
|
||||
public static function vite(bool $getShared = true): Vite
|
||||
{
|
||||
if ($getShared) {
|
||||
return self::getSharedInstance('vite');
|
||||
}
|
||||
|
||||
return new Vite();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,118 @@
|
|||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Libraries;
|
||||
|
||||
class Vite
|
||||
{
|
||||
protected string $manifestPath = 'assets/manifest.json';
|
||||
|
||||
protected string $manifestCSSPath = 'assets/manifest-css.json';
|
||||
|
||||
/**
|
||||
* @var array<string, mixed>
|
||||
*/
|
||||
protected ?array $manifestData = null;
|
||||
|
||||
/**
|
||||
* @var array<string, mixed>
|
||||
*/
|
||||
protected ?array $manifestCSSData = null;
|
||||
|
||||
public function asset(string $path, string $type): string
|
||||
{
|
||||
if (ENVIRONMENT !== 'production') {
|
||||
return $this->loadDev($path, $type);
|
||||
}
|
||||
|
||||
// @phpstan-ignore-next-line
|
||||
return $this->loadProd($path, $type);
|
||||
}
|
||||
|
||||
private function loadDev(string $path, string $type): string
|
||||
{
|
||||
return $this->getHtmlTag("http://localhost:3000/assets/{$path}", $type);
|
||||
}
|
||||
|
||||
private function loadProd(string $path, string $type): string
|
||||
{
|
||||
if ($type === 'css') {
|
||||
if ($this->manifestCSSData === null) {
|
||||
$cacheName = 'vite-manifest-css';
|
||||
if (! ($cachedManifestCSS = cache($cacheName))) {
|
||||
if (($manifestCSSContent = file_get_contents($this->manifestCSSPath)) !== false) {
|
||||
$cachedManifestCSS = json_decode($manifestCSSContent, true);
|
||||
cache()
|
||||
->save($cacheName, $cachedManifestCSS, DECADE);
|
||||
} else {
|
||||
// ERROR when getting the manifest-css file
|
||||
$manifestCSSPath = $this->manifestCSSPath;
|
||||
die("Could not load Vite's <pre>{$manifestCSSPath}</pre> file.");
|
||||
}
|
||||
}
|
||||
$this->manifestCSSData = $cachedManifestCSS;
|
||||
}
|
||||
|
||||
if (array_key_exists($path, $this->manifestCSSData)) {
|
||||
return $this->getHtmlTag('/assets/' . $this->manifestCSSData[$path]['file'], 'css');
|
||||
}
|
||||
}
|
||||
|
||||
if ($this->manifestData === null) {
|
||||
$cacheName = 'vite-manifest';
|
||||
if (! ($cachedManifest = cache($cacheName))) {
|
||||
if (($manifestContents = file_get_contents($this->manifestPath)) !== false) {
|
||||
$cachedManifest = json_decode($manifestContents, true);
|
||||
cache()
|
||||
->save($cacheName, $cachedManifest, DECADE);
|
||||
} else {
|
||||
// ERROR when retrieving the manifest file
|
||||
$manifestPath = $this->manifestPath;
|
||||
die("Could not load Vite's <pre>{$manifestPath}</pre> file.");
|
||||
}
|
||||
}
|
||||
$this->manifestData = $cachedManifest;
|
||||
}
|
||||
|
||||
$html = '';
|
||||
if (array_key_exists($path, $this->manifestData)) {
|
||||
$manifestElement = $this->manifestData[$path];
|
||||
|
||||
// import css dependencies if any
|
||||
if (array_key_exists('css', $manifestElement)) {
|
||||
foreach ($manifestElement['css'] as $cssFile) {
|
||||
$html .= $this->getHtmlTag('/assets/' . $cssFile, 'css');
|
||||
}
|
||||
}
|
||||
|
||||
// import dependencies first for faster js loading
|
||||
if (array_key_exists('imports', $manifestElement)) {
|
||||
foreach ($manifestElement['imports'] as $importPath) {
|
||||
if (array_key_exists($importPath, $this->manifestData)) {
|
||||
$html .= $this->getHtmlTag('/assets/' . $this->manifestData[$importPath]['file'], 'js');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$html .= $this->getHtmlTag('/assets/' . $manifestElement['file'], $type);
|
||||
}
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
private function getHtmlTag(string $assetUrl, string $type): string
|
||||
{
|
||||
return match ($type) {
|
||||
'css' => <<<CODE_SAMPLE
|
||||
<link rel="stylesheet" href="{$assetUrl}"/>
|
||||
CODE_SAMPLE
|
||||
,
|
||||
'js' => <<<CODE_SAMPLE
|
||||
<script type="module" src="{$assetUrl}"></script>
|
||||
CODE_SAMPLE
|
||||
,
|
||||
default => '',
|
||||
};
|
||||
}
|
||||
}
|
Before Width: | Height: | Size: 256 B After Width: | Height: | Size: 256 B |
Before Width: | Height: | Size: 185 B After Width: | Height: | Size: 185 B |
Before Width: | Height: | Size: 275 B After Width: | Height: | Size: 275 B |
Before Width: | Height: | Size: 226 B After Width: | Height: | Size: 226 B |
Before Width: | Height: | Size: 234 B After Width: | Height: | Size: 234 B |
Before Width: | Height: | Size: 259 B After Width: | Height: | Size: 259 B |
Before Width: | Height: | Size: 166 B After Width: | Height: | Size: 166 B |
Before Width: | Height: | Size: 166 B After Width: | Height: | Size: 166 B |
Before Width: | Height: | Size: 225 B After Width: | Height: | Size: 225 B |
Before Width: | Height: | Size: 218 B After Width: | Height: | Size: 218 B |
Before Width: | Height: | Size: 214 B After Width: | Height: | Size: 214 B |
Before Width: | Height: | Size: 217 B After Width: | Height: | Size: 217 B |
Before Width: | Height: | Size: 280 B After Width: | Height: | Size: 280 B |
Before Width: | Height: | Size: 467 B After Width: | Height: | Size: 467 B |
Before Width: | Height: | Size: 213 B After Width: | Height: | Size: 213 B |
Before Width: | Height: | Size: 283 B After Width: | Height: | Size: 283 B |
Before Width: | Height: | Size: 230 B After Width: | Height: | Size: 230 B |
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 257 B |
Before Width: | Height: | Size: 279 B After Width: | Height: | Size: 279 B |
Before Width: | Height: | Size: 338 B After Width: | Height: | Size: 338 B |
Before Width: | Height: | Size: 339 B After Width: | Height: | Size: 339 B |
Before Width: | Height: | Size: 298 B After Width: | Height: | Size: 298 B |
Before Width: | Height: | Size: 303 B After Width: | Height: | Size: 303 B |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 506 B After Width: | Height: | Size: 506 B |
Before Width: | Height: | Size: 501 B After Width: | Height: | Size: 501 B |
Before Width: | Height: | Size: 379 B After Width: | Height: | Size: 379 B |
Before Width: | Height: | Size: 245 B After Width: | Height: | Size: 245 B |
Before Width: | Height: | Size: 812 B After Width: | Height: | Size: 812 B |
Before Width: | Height: | Size: 176 B After Width: | Height: | Size: 176 B |
Before Width: | Height: | Size: 504 B After Width: | Height: | Size: 504 B |
Before Width: | Height: | Size: 1003 B After Width: | Height: | Size: 1003 B |
Before Width: | Height: | Size: 814 B After Width: | Height: | Size: 814 B |
Before Width: | Height: | Size: 417 B After Width: | Height: | Size: 417 B |
Before Width: | Height: | Size: 268 B After Width: | Height: | Size: 268 B |
Before Width: | Height: | Size: 251 B After Width: | Height: | Size: 251 B |
Before Width: | Height: | Size: 464 B After Width: | Height: | Size: 464 B |
Before Width: | Height: | Size: 244 B After Width: | Height: | Size: 244 B |
Before Width: | Height: | Size: 196 B After Width: | Height: | Size: 196 B |
Before Width: | Height: | Size: 321 B After Width: | Height: | Size: 321 B |
Before Width: | Height: | Size: 299 B After Width: | Height: | Size: 299 B |
Before Width: | Height: | Size: 373 B After Width: | Height: | Size: 373 B |
Before Width: | Height: | Size: 285 B After Width: | Height: | Size: 285 B |
Before Width: | Height: | Size: 241 B After Width: | Height: | Size: 241 B |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 473 B After Width: | Height: | Size: 473 B |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 693 B After Width: | Height: | Size: 693 B |
Before Width: | Height: | Size: 346 B After Width: | Height: | Size: 346 B |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 347 B After Width: | Height: | Size: 347 B |
Before Width: | Height: | Size: 324 B After Width: | Height: | Size: 324 B |
Before Width: | Height: | Size: 978 B After Width: | Height: | Size: 978 B |
Before Width: | Height: | Size: 445 B After Width: | Height: | Size: 445 B |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 744 B After Width: | Height: | Size: 744 B |
Before Width: | Height: | Size: 258 B After Width: | Height: | Size: 258 B |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 549 B After Width: | Height: | Size: 549 B |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 252 B After Width: | Height: | Size: 252 B |
Before Width: | Height: | Size: 716 B After Width: | Height: | Size: 716 B |
Before Width: | Height: | Size: 931 B After Width: | Height: | Size: 931 B |
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1022 B |
Before Width: | Height: | Size: 879 B After Width: | Height: | Size: 879 B |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 935 B After Width: | Height: | Size: 935 B |
Before Width: | Height: | Size: 798 B After Width: | Height: | Size: 798 B |
Before Width: | Height: | Size: 544 B After Width: | Height: | Size: 544 B |
Before Width: | Height: | Size: 212 B After Width: | Height: | Size: 212 B |
Before Width: | Height: | Size: 220 B After Width: | Height: | Size: 220 B |
Before Width: | Height: | Size: 838 B After Width: | Height: | Size: 838 B |
Before Width: | Height: | Size: 362 B After Width: | Height: | Size: 362 B |
Before Width: | Height: | Size: 242 B After Width: | Height: | Size: 242 B |
Before Width: | Height: | Size: 280 B After Width: | Height: | Size: 280 B |
Before Width: | Height: | Size: 516 B After Width: | Height: | Size: 516 B |
Before Width: | Height: | Size: 702 B After Width: | Height: | Size: 702 B |
Before Width: | Height: | Size: 693 B After Width: | Height: | Size: 693 B |
Before Width: | Height: | Size: 841 B After Width: | Height: | Size: 841 B |
Before Width: | Height: | Size: 304 B After Width: | Height: | Size: 304 B |
Before Width: | Height: | Size: 941 B After Width: | Height: | Size: 941 B |
Before Width: | Height: | Size: 766 B After Width: | Height: | Size: 766 B |
Before Width: | Height: | Size: 492 B After Width: | Height: | Size: 492 B |
Before Width: | Height: | Size: 790 B After Width: | Height: | Size: 790 B |
Before Width: | Height: | Size: 652 B After Width: | Height: | Size: 652 B |
Before Width: | Height: | Size: 163 B After Width: | Height: | Size: 163 B |
Before Width: | Height: | Size: 226 B After Width: | Height: | Size: 226 B |