@ TOC attention!!!!!! Attention!!!!!! Attention!!!!!! This article is based on Webpack and VueCli 4 packaging

Summary of a.

  • Benefits of using CDN
    • Relieve the pressure on the server and distribute the first screen load requests to other servers
    • Optimizes verdor.js oversized issues after packaging
    • Speed up the first screen loading
    • Speed up packing
  • In particular, Vue3’s new tree-shaking technology only packs modules that need to be loaded, and makes it even better with CDN!

Ii.CDN website sharing

Not all the relevant CDN dependent references can be switched according to the need, some JS will be incompatible, try to reference after being available!

  • domestic
    • BootCdn website www.bootcdn.cn/
    • Seven NiuYun staticfile.org/
  • foreign
    • Unpkg website unpkg.com
    • CDNJS website cdnjs.com/
    • Jsdelivr website www.jsdelivr.com/
Introduction to Vue versions:1.CJS (both versions are full versions, including compilers) vue.cjs.js vue.cjs.prod.js (development version, code compressed)2. globalVue.global.js (the full version, which contains the compiler and runtime) vue.global.prod.js (the full version, which contains the compiler and runtime, is the development version, which contains the compiler and runtime. Code for the compression) vue. Runtime. Global. Js vue. Runtime. Global. Prod. Js3.Browser (all four versions include ESM, the native modular way of the browser, which can be directly accessed via <script type="module"Js vue.esm-browser.prod.js vue.runtime.esm-browser.js vue.runtime.esm-browser.prod.js4.Bundler Vue. Esm - Bundler. Js bue.runtime.esm- BundlerCopy the code

Three. Packaging before and after comparison

By comparison, it can be seen that the package size is significantly smaller after the introduction of dependent packages through CDN

  • Before using a CDN
    • This is the package size with the full introduction of Element-Plus
    • Even with the introduction of Element-Plus on demand, the packaged size is 260KB or more

  • After using the CDN

Four. Example code

1. The index. The HTML page

Don’t say anything, just do it

<! DOCTYPEhtml>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <! Loading CSS style files -->
     <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />The < %} % ><! --js file loading -->
    <% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <script  src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>The < %} % ></head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>
Copy the code

2.vue.config.js

Instructions:

  • Vuejs must be loaded first, otherwise subsequent JS files will report problems with Vue not being found
  • The corresponding dependency name shall be the standard name exposed by CDN dependency package. For example, vUE corresponds to ‘vue’.
  • IS_PROD is the judgment item to determine whether it is in package mode

2.1 CDN Default value

  • Be sure to test the CDN once it’s introduced, because individual JS types are not appropriate for your development environment
  • The JS I’ve introduced so far is available in the VUE3 environment
const cdn = {
  // Development environment
  dev: {
    css: [].js: []},// Production environment
  build: {
    css: ['https://unpkg.com/element-plus/lib/theme-chalk/index.css'].js: [
      'https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.global.js'.'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.global.js'.'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.0/vuex.global.js'.'https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js'.'https://cdn.bootcdn.net/ajax/libs/element-plus/1.0.2-beta.44/index.full.js'.'https://cdn.bootcdn.net/ajax/libs/element-plus/1.0.2-beta.44/umd/locale/zh-cn.js'.'https://unpkg.com/dayjs/locale/zh-cn.js']}};let objExternals = {};
function externalsSet() {
  if (IS_PROD) {
    objExternals = {
      vue: 'Vue'.// Vue is used as an example
      axios: 'axios'.vuex: 'Vuex'.'vue-router': 'VueRouter'.'element-plus': 'ElementPlus'
    };
  }
}
externalsSet(); // This method is used to determine whether the current packaging mode
Copy the code

2.2 Define externals under configureWebpack.

  • External dependencies to ignore when packaging
 module.exports={
	 // Customize the WebPack configuration
  configureWebpack: {
    externals: objExternals
  },
}
Copy the code

2.3 Upload the CDN value defined on the current page to the main page under chainWebpack

chainWebpack: config= > {
    config.plugin('html').tap(args= > {
      if (IS_PROD) {
        args[0].cdn = cdn.build;
      }
      return args;
    });
}
Copy the code

3. Use in main.js

  • And the original use of the same, the only difference is the direct call external dependency package exposed objects, no need to define in advance
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const app = createApp(App);

app.use(ElementPlus);
ElementPlus.locale(ElementPlus.lang.zhCn);
app.use(router);
app.use(store);
app.mount('#app');
Copy the code

Five. Long winded

  • The introduction of Cdn is currently so much research, basic enough, after testing, production environment available!
  • If you are an Intranet developer (mostly in an off-grid environment), you are not recommended to use the CDN mode. Use the original node_module and change the configuration to THE CDN mode when the development is complete and the package is ready.
  • If there is a better proposal or description of the wrong place welcome to point out, will actively correct!