Cache busting using Laravel Mix and CDN (Laracon EU Amsterdam 2019)

Laravel Mix is an easy-to-use tool for building assets without writing Webpack config. It works out of the box for many use cases.

However, in real-world applications which have high traffic or global audience, you need to serve assets from CDN for the purpose of performance gain. But Laravel Mix doesn’t support uploading and serving assets from CDN by default.

You can achieve this by customizing Laravel Mix configuration. But it's not straightforward to make it work with CDN caching mechanism.

In this presentation, I’ll walk you through how to serve assets from CDN with proper cache busting strategy using Laravel Mix.

Transcript

1. Cache busting using Laravel Mix and CDN Laracon EU 2019 in Amsterdam
2. Ryuta Hamasaki @avosalmon
7. Cache busting using Laravel Mix and CDN
8. webpack.mix.js const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');
9. Install webpack-s3-plugin $ yarn add -D webpack-s3-plugin
10. const mix = require('laravel-mix'); const s3Plugin = require('webpack-s3-plugin'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.webpackConfig({ plugins: [ new s3Plugin({ // }) ] });
11. const mix = require('laravel-mix'); const s3Plugin = require('webpack-s3-plugin'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.webpackConfig({ plugins: [ new s3Plugin({ // }) ] });
12. const mix = require('laravel-mix'); const s3Plugin = require('webpack-s3-plugin'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.webpackConfig({ plugins: [ new s3Plugin({ // }) ] });
13. const mix = require('laravel-mix'); const s3Plugin = require('webpack-s3-plugin'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); if (mix.inProduction()) { mix.webpackConfig({ plugins: [ new s3Plugin({ // }) ] }); }
14. new s3Plugin({ include: /.*\.(css|js)$/, s3Options: { accessKeyId: process.env.AWS_ACCESS_KEY_ID, secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, region: process.env.AWS_DEFAULT_REGION, }, s3UploadOptions: { Bucket: process.env.AWS_BUCKET, CacheControl: 'public, max-age=31536000' }, directory: 'public' })
15. new s3Plugin({ include: /.*\.(css|js)$/, s3Options: { accessKeyId: process.env.AWS_ACCESS_KEY_ID, secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, region: process.env.AWS_DEFAULT_REGION, }, s3UploadOptions: { Bucket: process.env.AWS_BUCKET, CacheControl: 'public, max-age=31536000' }, directory: 'public' })
16. new s3Plugin({ include: /.*\.(css|js)$/, s3Options: { accessKeyId: process.env.AWS_ACCESS_KEY_ID, secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, region: process.env.AWS_DEFAULT_REGION, }, s3UploadOptions: { Bucket: process.env.AWS_BUCKET, CacheControl: 'public, max-age=31536000' }, directory: 'public' })
17. new s3Plugin({ include: /.*\.(css|js)$/, s3Options: { accessKeyId: process.env.AWS_ACCESS_KEY_ID, secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, region: process.env.AWS_DEFAULT_REGION, }, s3UploadOptions: { Bucket: process.env.AWS_BUCKET, CacheControl: 'public, max-age=31536000' }, directory: 'public' })
18. $ yarn dev
19. $ yarn prod
20. app.js
21. cache-control: public, max-age=31536000 Cache app.js app.js
22. app.js
23. app.js?id=xyz Cache Busting
24. const mix = require('laravel-mix'); const s3Plugin = require('webpack-s3-plugin'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); if (mix.inProduction()) { mix.version(); mix.webpackConfig({ plugins: [ new s3Plugin({ // }) ] }); }
25. const mix = require('laravel-mix'); const s3Plugin = require('webpack-s3-plugin'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); if (mix.inProduction()) { mix.version(); mix.webpackConfig({ plugins: [ new s3Plugin({ // }) ] }); }
26. mix-manifest.json { "/js/app.js": "/js/app.js?id=731163b8f50084f947b6", "/css/app.css": "/css/app.css?id=33e746eff21c53ed136b" }
27. mix-manifest.json { "/js/app.js": "/js/app.js?id=731163b8f50084f947b6", "/css/app.css": "/css/app.css?id=33e746eff21c53ed136b" }
28. // blade template => /js/app.js?id=731163b8f50084f947b6 Versioned file name mix('/js/app.js')
29. How do we reference assets URL on the CDN?
31. // .env ASSET_URL=https://cdn.something.com
32. // .env ASSET_URL=https://cdn.something.com 'asset_url' => env('ASSET_URL', null) // app.php
33. // .env => https://cdn.something.com/js/app.js?id=731163b8f50084f947b6 ASSET_URL=https://cdn.something.com 'asset_url' => env('ASSET_URL', null) // app.php asset(mix('/js/app.js')) // blade template
36. // .env ASSET_URL= APP_URL=http://localhost
37. // .env => http://localhost/js/app.js?id=731163b8f50084f947b6 ASSET_URL= APP_URL=http://localhost asset(mix('/js/app.js')) // blade template
40. PITFALL OF QUERY STRING VERSIONING
41. Some CDNs ignore query string
42. app.js?id=1234 CloudFront app.js Origin app.js
43. CloudFront Origin app.js app.js app.js?id=1234 app.js?id=1234 app.js Cached! Cached!
44. CloudFront Origin app.js app.js app.js?id=1234
45. app.js?id=5678 CloudFront Origin Updated app.js?id=1234 app.js app.js
46. app.js?id=5678 CloudFront Origin Updated app.js?id=5678 app.js app.js stale content
51. app.js?id=1234 CloudFront app.js?id=1234 Origin app.js
52. CloudFront Origin app.js app.js?id=1234 app.js?id=1234 app.js?id=1234 Cached! Cached! app.js?id=1234
53. CloudFront Origin app.js app.js?id=1234 app.js?id=1234
54. app.js?id=5678 CloudFront Origin Updated app.js?id=5678 app.js?id=1234 app.js?id=1234 app.js
55. CloudFront fresh content Origin Updated app.js?id=5678 app.js?id=5678 app.js?id=5678 app.js?id=5678 app.js Cached! Cached!
58. In some cases, S3 might return previous version of the object
59. https://docs.aws.amazon.com/AmazonS3/latest/dev/Introduction.html#ConsistencyModel
60. app.js CloudFront Origin app.js?id=1234
61. app.js CloudFront Origin app.js?id=1234 app.js?id=1234 Cached!
62. app.js CloudFront Origin app.js?id=1234
63. app.js CloudFront Origin app.js?id=5678 Update has not been propagated yet app.js?id=1234
64. app.js Origin OLD DATA app.js?id=5678 app.js?id=5678 CloudFront
65. Filename Based Versioning
66. CloudFront Origin app.1234.js
67. CloudFront Origin app.5678.js New app.1234.js
69. Install laravel-mix-versionhash $ yarn add -D laravel-mix-versionhash
70. const mix = require('laravel-mix'); const s3Plugin = require('webpack-s3-plugin'); require('laravel-mix-versionhash'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); if (mix.inProduction()) { mix.version(); mix.webpackConfig({ plugins: [ new s3Plugin({ // }) ] }); }
71. const mix = require('laravel-mix'); const s3Plugin = require('webpack-s3-plugin'); require('laravel-mix-versionhash'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); if (mix.inProduction()) { mix.version(); mix.webpackConfig({ plugins: [ new s3Plugin({ // }) ] }); }
72. const mix = require('laravel-mix'); const s3Plugin = require('webpack-s3-plugin'); require('laravel-mix-versionhash'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); if (mix.inProduction()) { mix.versionHash(); mix.webpackConfig({ plugins: [ new s3Plugin({ // }) ] }); }
73. mix-manifest.json { "/js/app.js": "/js/app.104ee8.js", "/css/app.css": "/css/app.bcdfca.css" }
74. mix-manifest.json { "/js/app.js": "/js/app.104ee8.js", "/css/app.css": "/css/app.bcdfca.css" }
76. Is this the only way to build assets for Laravel?
77. Webpack
78. Webpack - Full Customization
79. Webpack - Full Customization - Filename based versioning → Easy
80. Webpack - Full Customization - Filename based versioning → Easy - Steep learning curve
81. JS Framework CLIs
82. JS Framework CLIs - Standalone SPA
83. JS Framework CLIs - Standalone SPA - Testing, Linting, TypeScript, PWA, etc
84. JS Framework CLIs - Standalone SPA - Filename based versioning by default - Testing, Linting, TypeScript, PWA, etc
85. Laracon 2018 - Vue CLI Overview By Evan You
86. WRAP UP
87. WRAP UP - Query string versioning vs Filename based versioning
88. WRAP UP - If you use a CDN, stick to filename based versioning - Query string versioning vs Filename based versioning
89. WRAP UP - Other options to achieve filename based versioning → Webpack or JS Framework CLIs - If you use a CDN, stick to filename based versioning - Query string versioning vs Filename based versioning
90. THANK YOU https://github.com/avosalmon/laravel-mix-cdn @avosalmon