background

For an application, if the resource volume is too large, it will inevitably affect the performance. So we’re always thinking about how to improve the performance of our applications, and CDN is one way to do that. For some third-party libraries that provide CDN, we can introduce them in CDN mode instead of installing them in the form of NPM. This will definitely reduce the resource packaging volume and make the application more responsive.

Understand the CDN

The full name of a CDN is Content Delivery Network or Content Ddistribute Network.

The basic principle of CDN is widely used in a variety of the cache, the cache server distribution to the user to access relatively concentrated area or in the network, when users visit the web site, using the global load technology to the user’s access point to the nearest work cache server, directly by the cache server response to user requests.

You can simply think of it as a server that is close to you and can get complete raw data from it. It periodically synchronizes with the server that has the original content to ensure that users can get the latest content from it.

externals

Webpack is the mainstream front-end packaging tool. You can configure externals for third-party libraries introduced by CDN. Externals prevents imported packages from being packaged into the bundle, and instead gets these external dependencies from the runtime.

So how do you configure externals?

First of all, you need to know the variable name exposed by the third party library introduced via CDN. This is crucial. If the global variable name is incorrectly configured, webPack will not get the variable correctly when packaging, and the project will not run properly.

Open in your browser the index. HTML file that imported a third-party library through the CDN. In my current new project, FOR example, I have introduced Vue, AT-UI, and Element-UI.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <! -- Introducing styles -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/at-ui-style/css/at.min.css">
  <! -- Introducing a component library -->
  <script src="https://cdn.jsdelivr.net/npm/at-ui/dist/at.min.js"></script>
  <! -- Introducing styles -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <! -- Introducing a component library -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <! -- <at-button type="primary">click me</at-button> -->
  </div>

  <! -- <script type="text/javascript"> new Vue({ el: '#app' }) </script> -->
</body>
</html>
Copy the code

Then open the console, type console.log(window), press Enter, and the window object will be printed:

Here we can see that the global variable names of Vue, AT-UI and Element-UI introduced by CDN are vue, AT and Element.

Now you can configure externals:

// webpack.common.js

module.exports = {
  externals: {
    'vue': 'Vue'.'element-ui': 'ELEMENT'.'at-ui': 'at'}}Copy the code

So when using these third-party libraries in a project, we can use Vue in the form of import Vue from ‘Vue’. The UI component library here doesn’t need to be added, it can be used directly in the project. Take at-UI for example, I used it in app.vue like this:

<! --App.vue-->
<template>
  <div id="app-instance">
    <at-button type="primary">click me</at-button>
  </div>
</template>

<script>
export default{}</script>

<style>

</style>
Copy the code

Note: For UI component libraries developed based on VUE, the VUE must also be introduced through the CDN, and note the order before the component libraries. This is to ensure that the VUE instance already exists when the UI component library is running.

Finally, start webpack, and you can see in the browser that the project is started normally, and the button is displayed normally, and you’re done!

conclusion

Finally, the project demo address is attached. Interested partners can also try other libraries.

Project Demo address