包简介

a lightweight PHP-backend integration for the Vite frontend build tool

README 文档

README

This library provides a lightweight backend integration for your PHP-based MPA, SPA, or PWA based on Vite.

It parses the build manifest (the .vite/manifest.json file) and produces the required <script> and <link> tags to load (and preload) scripts, CSS files, and other assets.

Basic Usage

A commented MPA example is available here - please refer to this for examples of configuring Vite, NPM, TypeScript, and Composer.

In the following steps, we'll cover usage of the library API only.

1. Load the `manifest.json` file created by Vite:

use mindplay\vite\Manifest;

$vite = new Manifest(
    manifest_path: $your_root_dir . '/public/dist/.vite/manifest.json',
    base_path: '/dist/',
    dev: false
);

The manifest_path points to the Vite manifest.json file created for the production build.

In this example, dev is false, so we'll be creating tags for the production assets.

The base_path is relative to your public web root - it is the root folder from which Vite's production assets are served, and/or the root folder from which Vite serves assets dynamically in development mode.

Note that, in development mode (when dev is set to true) the manifest.json file is unused, and not required.

💡 For a detailed description of the constructor arguments, please refer to the Manifest constructor argument doc-blocks.

2. Create the `Tags` for an entry point script:

$tags = $vite->createTags("index.ts");

Your entry point scripts are defined in Vite's build.rollupOptions using RollUp's input setting.

Note that, if you have multiple entry point scripts on the same page, you should pass them in a single call - for example:

$tags = $vite->createTags("index.ts", "consent-banner.ts");

Making multiple calls for different entry points may result in duplicate tags for any shared static imports - you will most likely need just one instance of Tags on a single page.

3. Emit from `Tags` in your HTML template:

Your Tags instance contains the preload and CSS tags, which should be emitted in your <head> tag, as well as the js tags, which should be emitted immediately before the </body> end tag.

For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vite App</title>
    <link rel="icon" href="<?= $vite->getURL("php.svg") ?>" />
    <?= $tags->preload ?>
    <?= $tags->css ?>
</head>
<body>
    <div id="app"></div>
    <?= $tags->js ?>
</body>
</html>

Preloading Assets

The service preloads any statically imported scripts and CSS files by default.

In addition, you can configure it to preload other statically imported assets as well - for convenience, there are two methods to automatically configure preloading of all common image and font asset types:

$manifest->preloadImages();
$manifest->preloadFonts();

You can also configure it to preload any other asset types - for example, to configure preloading of .json assets, you could add the following:

$manifest->preload(
    ext: "json",
    mime_type: "application/json",
    preload_as: "fetch"
);

Then create your tags as covered in the documentation above.

Creating URLs

For advanced use cases, you can also directly get the URL for an asset published by Vite:

$my_url = $manifest->getURL("consent-banner.ts");

You can use this feature to, for example:

Create your own custom preload tags (e.g. with media queries)
Conditionally load a script based on user interactions or user state, etc.

mindplay/php-vite 适用场景与选型建议

mindplay/php-vite 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 119.47k 次下载、GitHub Stars 达 71，最近一次更新时间为 2024 年 05 月 04 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 mindplay/php-vite 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 mindplay/php-vite 我们能提供哪些服务？

定制开发 / 二次开发

基于 mindplay/php-vite 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

mindplay/php-vite

包简介

README 文档

README

Basic Usage

1. Load the `manifest.json` file created by Vite:

2. Create the `Tags` for an entry point script:

3. Emit from `Tags` in your HTML template:

Preloading Assets

Creating URLs

mindplay/php-vite 适用场景与选型建议

统计信息

GitHub 信息

其他信息

mindplay/php-vite

包简介

README 文档

README

Basic Usage

1. Load the manifest.json file created by Vite:

2. Create the Tags for an entry point script:

3. Emit from Tags in your HTML template:

Preloading Assets

Creating URLs

mindplay/php-vite 适用场景与选型建议

统计信息

GitHub 信息

其他信息

1. Load the `manifest.json` file created by Vite:

2. Create the `Tags` for an entry point script:

3. Emit from `Tags` in your HTML template: