jsファイルのバージョニング

2018年07月30日

はじめてのSymfony4 + Vue.js

jsファイルのバージョニング

チュートリアル対象バージョン

jsファイルのバージョニング

enableVersioningをtrueにすると、webpackで出力したjsファイルにバージョンIDをつけることができます。

webpack.config.js

                
                    Encore
                        .enableVersioning(true)
                        ...

バージョンIDが都度変わるため、jsファイルがブラウザにキャッシュされてしまうという事故を避けることができます。逆に言えば毎回ファイル名が変わるので、テンプレートなどにファイル名をそのまま指定してる場合は運用が破綻します。そのため、実際の運用では manifest.json を利用します。

>manifest.json

                
                    {
                      "build/vueapp.js": "/build/vueapp.84f995ba.js"
                    }

manifest.jsonには、webpackで指定した出力名とバージョニングされたファイルのマッピングが記載されています。このjsonを config/framework.yaml に設定すると、twigテンプレート上のasset関数が自動で変換してくれるようになります。

config/framework.yaml

                
                    framework:
                        assets:
                            json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

templates/tutorial/index.html.twig

                
                    <script src="{{ asset('build/vueapp.js') }}"></script>