javascript - Zend Framework 1应用程序中的缓存清除静态 Assets

Question

在带有node.js，模块 bundle 器，任务运行器等的“现代” Web应用程序这个崭新的世界中，我感到非常失落和愚蠢。

我有一个正在工作的Zend Framework(ZF 1)PHP应用程序(该应用程序还嵌入了WordPress多站点，允许用户创建自己的博客站点)。它通过mod_php托管在Apache服务器上。尽管css基于固定宽度的1000px页面，但它在表单和数据显示中使用了html表，但是对于整个页面布局来说，它还算不错。

该应用程序以javascript仅应用于“渐进增强”的概念开始开发，尽管最终我们屈从于要求启用javascript才能获得正确的行为。我们支持通过多个提供商(Facebook，Google，LinkedIn，Twitter等)使用OAuth2身份验证进行注册和登录，但仅通过服务器流程而不是javascript SDK。我们使用jQuery和数量有限的Zend_Dojo javascript库，以及少量本地开发的javascript函数(除了WordPress所使用的之外)。

最近，我们在原始Apache网络服务器之前添加了Nginx反向代理。它托管我们的ssl证书，并提供静态文件 Assets 。

现在，我们正在寻求一种更具响应性的设计，以更好地适应移动和平板电脑用户，并思考渐进式Web应用程序。因此，对CSS的重大更改和对javascript的更多使用就在其中。尽管Nginx提供的静态 Assets 为我们提供了eTag，但Google Page Speed Insights告诉我们，我们阻止了javascript和css资源的下载，并且我们没有利用浏览器缓存。

从我看到的各种文章中可以看出，Webpack bundle 工具可以为解决所有这些性能瓶颈提供重要帮助。但是对于我的一生，我看不到它如何适应这个生态系统。我对网站的工作方式的思维模型是，通过PHP代码分析http查询，将其分配到访问 session 数据和MySQL数据库的PHP操作例程，然后通过包含嵌入式PHP的phtml模板(ZF1 View 脚本)输出html。标签。 phtml模板可以直接包含<script>，<style>和<img>标记，也可以通过管理其他页面布局及其<header>部分内容的其他PHP函数注入(inject)html来包含它们。

但是，当我查看Webpack时，似乎期望使用某种顶级javascript文件，通过import或require指令或类似的东西，它可以从中构建其他javascript和css文件的依赖关系树。而且，它通过散列静态 Assets 文件的内容，使用包含在文件名中的散列值从中创建新文件以及编辑对这些文件的引用以包括散列值来支持缓存清除。但是对于此应用程序，所有对javascript，css和图像文件的引用都显示在.phtml文件中(通常在嵌入式<?php>标记中)或纯.php文件中。但是webpack似乎根本不处理php文件-因此我看不到它如何找到对javascript，css和图像文件的引用，或者如何编辑它们以包含哈希!我见过的有关在PHP项目中使用webpack的文章似乎根本没有提到这个问题。有一个html加载器，但没有一个PHP加载器。关于在PHP网站中以独立的模块化方式使用javascript而不是使用我不知道的<script>标记，是否存在某种标准实践？

最后，不同的网页对javascript和样式有不同的要求，而webpack似乎想要一个可以从中找到所有依赖项的javascript主要入口点。在这个生态系统中使用webpack是否意味着为每个页面创建一个单独的webpack项目？我已经阅读了很多有关webpack的文章，但是它们似乎都在处理与我完全不一样的Web应用程序!

我确实在这里阅读了关于Stackoverflow的this答案，希望可以启发我。非常接近-它说明我确实需要创建一个顶级index.js文件，该文件需要所有其他javascript文件。但是由于不同的页面使用不同的javascript，我推断需要为每个页面创建一个不同的index.js文件(因此将每个页面视为一个不同的项目)。可以吗？许多文章都谈论“单页应用程序”，因此也许这只是这些描述中的假设。或者，也许我需要了解“代码拆分”。也许如果我一遍又一遍地阅读该答案，最终我会明白的。它谈论CSS和style-loader和css-loader，但是我不清楚我的.phtml文件中存在的<style>标签如何被它们处理(更不用说WordPress代码中排队的样式了)。我曾经尝试过SurviveJs和Official Webpack文档，但同样，他们似乎在谈论与我所居住的世界不同的世界。我认为Rosetta石头存在于某个地方，可以将这个新世界映射回传统的PHP。应用!有指针吗？

Answer 1

这是一个古老的问题，但是我尝试给出一些指示，因为我刚刚经历了类似的障碍:尝试将Webpack与旧版ZF1应用程序集成在一起:

Assets bundle

通过将版本哈希附加到文件名

中来清除缓存

为不同的应用程序路线提供不同的包

我的方法:

首先，我检查了较新版本的Zend_View，提供了一些用于前端 Assets 版本控制的解决方案。我找到了这个:

https://docs.zendframework.com/zend-view/helpers/asset/

并非常喜欢将版本控制问题封装在单独的配置文件中的想法。显然，要使用此格式，我要么必须在旧版应用程序中使用此 zend_view帮助程序，要么简单地扩展旧版zend_view类并添加 ->asset方法，该方法只需读取此格式的资源映射即可:

'view_helper_config' => [
    'asset' => [
        'resource_map' => [
            'css/style.css' => 'css/style-3a97ff4ee3.css',
            'js/vendor.js' => 'js/vendor-a507086eba.js',
        ],
    ],
],

坚持使用这种格式的另一个好处是，一旦将应用程序升级到Zend Framework或Zend Expressive的较新版本，就无需进行任何更改，只需开始使用现代Zend_View的 Asset帮助程序即可。

一旦有了这样的 map ，我们需要使webpack编写它。因此，HtmlWebpackPlugin不仅限于html文件。我们可以 write our own template并完全控制如何使用webpack变量(例如 Assets 名称和哈希)编写模板。这里最大的优点是webpack不需要覆盖通常会变成困惑并有其自身问题的许多 View 模板(例如，如果我们通过 headScript调用将脚本包含在 Controller 中怎么办？)-它仅编写 map 。该位解决了问题2-缓存清除。问题1和问题3- Assets bundle 和创建不同的 bundle 包现在可以通过本机Webpack方式解决-通过创建多个 bundle 包，然后使用我们的自定义模板编写配置文件:

const path = require('path');

 module.exports = {
     mode: 'development',
     entry: {
         'js/vendor.js': './frontend/src/js/vendor.js',
         'css/style.css': './frontend/src/css/style.js',
         // and so on...
     },
     output: {
         filename: '[name]-[hash].js',
         path: path.resolve(__dirname, 'public/js'),
     },
     plugins: [
         new HtmlWebpackPlugin({  // Also generate a test.html
             filename: 'view-helper-config.php',
             template: 'view-helper-config.tpl'
         })
     ]
 };

view-helper-config.tpl将是:

'view_helper_config' => [
    'asset' => [
        'resource_map' => [
             <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
                 <%chunk%> => <%= htmlWebpackPlugin.files.chunks[chunk].entry %>
            <% } %>
        ],
    ],
],