クライアント側にCSSキャッシュをフラッシュする方法は？

magento.stackexchange https://magento.stackexchange.com/questions/60

  •  16-10-2019
  •  | 
  •  

質問

モジュール（テンプレート、レイアウト、CSS）に対して多くの機能を変更し、これらの変更を生産サイトに移動すると仮定しますが、多くの顧客がブラウザにCSSをキャッシュしています。だからここに質問があります。フラッシュクライアントのCSSキャッシュを強制し、ファイルの名前変更を避ける方法（styles.css -> styles-v2.css）。論理的な方法は1つありますが、Magentoでは機能しません。これは、既存のファイルをチェックするためです（この方法はJSファイルで機能する方法では）以下を参照してください。

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>

何か案は？

役に立ちましたか？

解決

これに対処する1つの方法は、CSSのマージを可能にすることです。その後、キャッシュをクリアするだけで、新しいファイル名で新しいマージされたファイルが作成されます。

System -> Configuration -> Developer -> CSS settings -> Merge CSS Files

私の知る限り、マージされたCSSファイルのハッシュコードは、基礎となるファイルが変更された場合でも同じままです - マージされたファイルのセットに新しいファイルが追加された場合にのみ、ハッシュは変更されます。 - @Alex

これに対処する別の方法は、layout.xmlを使用する代わりに、

それらをあなたに置くだけです page/html/head.phtml

または、aを含むブロックを作成します <style> バージョン番号のタグを付けて、頭の中のXMLに入れて、特定のページのみにロードして、XMLレイアウトを使用することに固執することができます。

他のヒント

OpenSourceモジュールを使用できます AOE_JSCSSTSTAMP マージされたCSSファイルにタイムスタンプ情報を追加します。プレーン（マージド）CSSファイルのタイムスタンプはそうです ただし、まだサポートされていません しかし、これは簡単に実装できます。

GitHub「Magento CacheBuster」には、まさにこれを行う無料の拡張機能があります。それは再

https://github.com/gknoppe-guidance/magento-cachebuster

モジュールは、ファイルのタイムスタンプをファイル名に追加することにより、>静的ファイルのためにMagentoによって作成されたURIを自動的に変更することにより、キャッシュバストを提供します。

前： http://www.example.com/js/varien/js.js後： http://www.example.com/js/varien/js.132429472.js

私はこのためにAdvancedの独自の拡張機能を使用しています。しかし、基本原則は、マージされたCSSおよびJSファイルの名前には、最後の変更されたファイルのタイムスタンプが含まれていることです。 Mage_Core_Model_Design_Package::getMergedCssUrl(). 。 CSSファイルのいずれかを編集するたびに、新しいファイル名が作成され、ブラウザはキャッシュバージョンを再利用する代わりに新しいファイルを要求します。ヘッドブロックがキャッシュされる可能性があるため、Magentoキャッシュの更新が必要です。

また、CSSファイル用のキャッシュバスターも実装しています。私が推測する最善の方法は拡張することです mage_page_block_html_head 以下の関数を乗り越えて更新します $ skinitems 希望する変更を伴う配列。

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{
    $designPackage = Mage::getDesign();
    //$skinItems: contains all css
    foreach ($skinItems as $params => $rows) {
        foreach ($rows as $key=>$name) {
            $file = $designPackage->getFilename($name, array('_type' => 'skin'));
            $skinItems[$params][$key] = $name . "?fmt=" . filemtime($file);
        }
    }
    return parent::_prepareStaticAndSkinElements($format, $staticItems, $skinItems, $mergeCallback);

}

ここからインスピレーションを得ました。 ソース

プラグインを必要とせず、Magento機能の組み込みだけを使用するだけのシンプルだが面倒な回避策があります。これ以上のコードをインストールするリスクを負うことなく、既存のサイトですばやく実行する必要がある場合に便利です。

アイデアは、マージされたCSSシステムを使用して、キャッシュバストファイル名を生成できるということです。

マージされたCSSファイル名は、マージされたすべてのファイルのハッシュであるため、名前の日付スタンプでテーマに追加の空白のCSSファイルを追加するだけです。

それで：

  1. Configuration> Advanced> DeveloperでMerge CSSファイルをオンにする
  2. テーマレイアウトでは、CSSファイルをヘッドに追加する場所（通常はpage.xml）を見つけ、追加のスタイルシートファイルを追加して、名前が一意である限り、必要なものをすべて呼び出します<action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
  3. Skin CSSフォルダーで、その名前の新しいCSSファイルを作成します。ファイルの内容については、ファイルの目的をコメントしました

Magentoキャッシュをライブで押してフラッシュすると、合併したCSSファイルには別の名前が付けられ、キャッシュが逮捕されます！

そのファイル名を変更する必要があるキャッシュをバストしたいたびに、それは面倒ですが、マゼントの機能を組み込む以外は何も必要ありません。

=>このコードを使用する代わりに：

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>

=>このコードを使用してみてください。

<reference name="head">
    <block type="core/text" name="foocss">
        <action method="setText">
            <css><![CDATA[<link rel="stylesheet" type="text/css" href="foo.css?1" media="all" />]]></css>
        </action>
    </block>
</reference>

しかし、それはあまり良くありません...

XMLレイアウトのすべてのCSSおよびJSの最後にクエリ文字列を追加するモジュールを見つけました。クエリ文字列は、管理者から構成可能です。

https://github.com/mklooss/loewenstark_head

基本的なアイデアは、オーバーライドすることです _prepareStaticAndSkinElements 以下に示すように、モジュールで行われたクエリ文字列を含める。

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{
    $version = Mage::getStoreConfig("design/head/meta_version_tag");
    $format = sprintf($format, "%s?v{$version}", "%s");
    return parent::_prepareStaticAndSkinElements($format, $staticItems, $skinItems, $mergeCallback);
}

質問で提案されている解決策を理解している場合、コアファイルへのわずかなmodでそれを行うことができます（実際にコアファイルを編集しないでください):

mage/page/block/html/head.php

v = 1を198行に追加するので、すべてのCSSファイルがこれを追加します。

$html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?v=1"%s />' . "\n",

Fooman Speedster Advanced（http://www.magentocommerce.com/magento-connect/fooman-speedsteradvanced-4030.html）解決策になる可能性があります。

「JavaScript/CSSファイルが更新されたときに自動バージョンを使用して、インストールされると完全に自動化されました」

私はこれのために無料のモジュールを構築しました：

http://www.magentocommerce.com/magento-connect/frontend-flush-2048.html

予想どおりに機能しないかどうかを教えてくださいが、コンカテン化されたファイルの1つのコンテンツが変更された場合、JSファイルとCSSファイルを組み合わせて別のハッシュを持つように作成しました。デフォルトでは、Magentoは、含まれているファイルの1つのファイル名が変更された場合にのみ、結合されたファイルのハッシュを変更します。

アップデート

また、それを信じる人のために、無料でシンプルなマイニリモジュールを作成しました。

http://www.magentocommerce.com/magento-connect/minify-7771.html

Fabrizio Brancaによって作成された本当に素晴らしいモジュールがあり、あなたが興味を持っていることを正確に行うことがあります。それは呼ばれています AOE_JSCSSTSTAMP 。それは何をしますか？ CSSとJSリソースの両方にタイムスタンプを追加します。 CSS/JSキャッシュをフラッシュすると、タイムスタンプが再現されます。

ブラウザには異なるファイル名が表示されます。そのため、リソースを再度ロードし、ブラウザでキャッシュされる代わりに新鮮なリソースを提供します。

メソッドを編集するだけです getcssjshtml の mage_page_block_html_head, 、CSS編集の数日後にこのような文字列を追加すると、それだけです...それは単に機能します

// static and skin css
        $html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?foo=WHAT_YOU_WANT_HERE"%s />' . "\n",
            empty($items['js_css']) ? [] : $items['js_css'],
            empty($items['skin_css']) ? [] : $items['skin_css'],
            $shouldMergeCss ? [Mage::getDesign(), 'getMergedCssUrl'] : null
        );

数年後、ファイルをマージせず、シンプルな有用な拡張機能を見つけられず、私は自分のものを作成しました。主なアイデアは、キャッシュを洗い流した後、タイムスタンプを更新するということです。だから言い換えれば、あなたがいくつかを変えるとき css/js, 、フラッシュキャッシュとタイムスタンプが更新されます。

ソースコードはここにあります - > https://github.com/archonkulis/ansolutions_cssjstimestamp

作業 1.9+ バージョン。ただし、古いバージョンについてはわかりませんが、おそらく機能するはずです。

新しい名前（Themev2）でテーマのコピーを作成します - スキンとアプリ/デザインの両方など。その後、管理者の新しいテーマを選択します。

ライセンス： CC-BY-SA と 帰属
所属していません magento.stackexchange
scroll top