使用 Webpack Encore 与 CDN

您是否正在部署到 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/')
      // in dev mode, don't use the CDN
      .setPublicPath('/build');
      // ...
  ;

+ if (Encore.isProduction()) {
+     Encore.setPublicPath('https://my-cool-app.com.global.prod.fastly.net');
+
+     // guarantee that the keys in manifest.json are *still*
+     // prefixed with build/
+     // (e.g. "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 路径已更新，以包含 CDN 的完整 URL。

当部署到 CDN 的子目录时，您必须在 URL 末尾添加路径 - 例如 Encore.setPublicPath('https://my-cool-app.com.global.prod.fastly.net/awesome-website') 将生成类似 https://my-cool-app.com.global.prod.fastly.net/awesome-website/dashboard.js 的资源 URL

如果您正在使用 Encore.enableIntegrityHashes() 并且您的 CDN 和您的域不是同源，您可能需要在您的 webpack_encore.yaml 配置文件中将 crossorigin 选项设置为 anonymous 或 use-credentials 以克服 CORS 错误。