appeal

The same front-end project can be accessed by multiple domain names, and different CDN names need to be used to access different domain names. For example, you can use the CDN domain names a.cdn.com, b.cdn.com, and c.cdn.com to access the web page.

plan

1. Different page domain names correspond to different CDN domain names

Map the page access domain name to the CDN domain name, and dynamically obtain the corresponding CDN domain name based on the page access domain name. If Node is in direct HTML form, inject a global variable directly and assemble the static resources that the home page depends on

2. How to set the CDN domain name for loading JS files asynchronously

In Webpack, asynchronously loaded JS is passedlib/web/JsonpMainTemplatePlugin.jsThe first condition for a loaded, asynchronous component is to concatenate the resource’s path:The project code is compiled in the following form:A variable is used to concatenate paths__webpack_require__.pIf you can change this variable dynamically, you can change the loading prefix of static resources dynamically. This path can be set in code__webpack_public_path__Variable to modify__webpack_require__.p, the general principle is Webpack internal integration of an APIPlugin, code can see Webpack source codelib/APIPlugin.jsFile, when parsing source code, will__webpack_public_path__Replace with__webpack_require__.p.

So you can set it in the source code:

if (window.__webpack_public_path__) {
  __webpack_public_path__ = window.__webpack_public_path__
}
Copy the code

If the CDN’s domain name is dynamically injected into the page, the default is overridden. Of course, combined with some detection methods, it should also be able to achieve the degradation of the CDN domain name.

3. How do I not invade code Settings__webpack_public_path__

Setting __webpack_public_path__ can be understood as an engineering action, and has nothing to do with specific business logic. If multiple projects have a common purpose, it should be directly reusable, rather than changing the source code every time.

Since it is defined as an engineering behavior, most of the engineering scenes are by scaffolding, scaffolding contains development, compilation, deployment and other capabilities, set the __webpack_public_path__ variable should be in the source code compilation stage, can be packaged into a plug-in form, because the project is built based on Webpack, So based on Webpack to achieve a plug-in.

By looking at the source code of Webpack, while investigating some existing plug-ins, there are two general ideas:

  1. The Babel plugin modifies parsed files through the parsed file stage.
  2. Loader form of Webpack. For files matching rules, add a custom Loader and modify source files in the Loader.

Using the Babel plugin form is too complicated. After all, it’s just a few lines of code inserted into the source code, and it’s probably easiest to use WebPack. By looking at webpack plug-in to find its own blind spot knowledge, Webpack entry support multiple files, in fact, just need to dynamically modify the entry, add a file, roughly achieved as follows: Then use the plug-in in the webPack configuration.

Reference plug-in: webpack-inject-plugin

conclusion

Some scenarios require a project to use different domain names in different scenarios, and CDN names corresponding to different domain names are inconsistent. You can dynamically deliver CDN names and change the resource path prefix in Webpack to solve the problem of multiple CDN names.