Використання CDN з Webpack Encore

Ви розгортаєте на CDN? Це чудово :) Після того, як ви переконалися, що ваші побудовані файли завантажено на CDN, сконфігуруйте її в Encore:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// webpack.config.js
  // ...

  Encore
      .setOutputPath('public/build/')
      // не використовуйте CDN у режимі розробки
      .setPublicPath('/build');
      // ...
  ;

+ if (Encore.isProduction()) {
+     Encore.setPublicPath('https://my-cool-app.com.global.prod.fastly.net');
+
+     // гарантувати, що ключі в manifest.json *все ще*
+     // мають префікс build/
+     // (наприклад, "build/dashboard.js": "https://my-cool-app.com.global.prod.fastly.net/dashboard.js")
+     Encore.setManifestKeyPrefix('build/');
+ }

Це все! Внутрішньо Webpack тепер буде знати, що потрібно завантажувати ресурси з вашої CDN - наприклад, https://my-cool-app.com.global.prod.fastly.net/dashboard.js.

Вам необхідно переконатися, що теги script і link, які ви додаєте на свої сторінки, також використовують CDN. На щастя, шляхи entrypoints.json оновлюються,
щоб містити повну URL-адресу до CDN.

При розгортанні в підкаталог вашої CDN, ви повинні додати шлях в кінці URL-адреси - наприклад, Encore.setPublicPath('https://my-cool-app.com.global.prod.fastly.net/awesome-website') згенерує URL ресурсів на кшталт https://my-cool-app.com.global.prod.fastly.net/awesome-website/dashboard.js.

Якщо ви використовуєте Encore.enableIntegrityHashes() і ваша CDN та ваш домен не мають same-origin, вам може знадобитися встановити опцію crossorigin у вашій конфігурації webpack_encore.yaml у значення anonymous або use-credentials для подолання помилок CORS.