目录

  • 一.概述
  • 二.CDN网站分享
  • 三.打包前后对比
  • 四.实例代码
  • 1.index.html 页面
  • 2.vue.config.js
  • 2.1 cdn预设值
  • 2.2 在configureWebpack下定义externals,
  • 2.3 在chainWebpack下将当前页面定义的cdn值传到主页面
  • 3. main.js中的使用
  • 五.啰里啰嗦



注意!!!注意!!!注意!!! 本文是基于Webpack和VueCli 4 打包

一.概述

  • 使用CDN的好处
  • 缓解服务器的压力,将首屏加载时的请求分摊给其它的服务器
  • 优化打包后verdor.js过大问题
  • 加快首屏加载速度
  • 加快打包速度
  • 尤其是Vue3新的Tree-Shaking技术,只打包需加载的模块module,搭配CDN后如虎添翼!

二.CDN网站分享

根据需要自行切换相关CDN
依赖引用并非全部可用,有的js会不兼容, 自行尝试通过可用后在进行引用操作!

  • 国内
  • 国外 
Vue的各种版本介绍：
1. cjs（两个版本都是完整版，包含编译器）
vue.cjs.js
vue.cjs.prod.js（开发版，代码进行了压缩）

2. global（这四个版本都可以在浏览器中直接通过scripts标签导入，导入之后会增加一个全局的Vue对象）
vue.global.js（完整版，包含编译器和运行时）
vue.global.prod.js（完整版，包含编译器和运行时，这是开发版本，代码进行了压缩）
vue.runtime.global.js
vue.runtime.global.prod.js

3. browser（四个版本都包含esm，浏览器的原生模块化方式，可以直接通过<script type="module" />的方式来导入模块）
vue.esm-browser.js
vue.esm-browser.prod.js
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js

4. bundler（这两个版本没有打包所有的代码，只会打包使用的代码，需要配合打包工具来使用，会让Vue体积更小）
vue.esm-bundler.js
bue.runtime.esm-bundler.js

三.打包前后对比

通过对比可看出,通过CDN引入依赖包后,打包大小明显小很多

  • 使用CDN前
  • 此图为完整引入Element-plus后的包大小
  • 即使通过按需引入Element-plus,打包后的大小也在260KB以上
  • 使用CDN后

四.实例代码

1.index.html 页面

无需多言,照做即可

<!DOCTYPE html>
<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>
    <!--css样式文件的加载-->
     <% 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" />
    <% } %>
	<!--js文件的加载-->
    <% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <script  src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </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>

2.vue.config.js

须知:

  • vuejs的加载必须放在第一位,否则后续js文件会报找不到Vue的问题
  • 对应依赖名称,须按照cdn依赖包对外暴露的名称为标准, 如vue对应 ‘Vue’
  • IS_PROD是判断是否为打包模式的判断项

2.1 cdn预设值

  • cdn引入后务必测试一下,因为个别js类型并不适用于您的开发环境
  • 目前我引入的这些js在vue3环境下是可用的
const cdn = {
  // 开发环境
  dev: {
    css: [],
    js: []
  },
  // 生产环境
  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为示例
      axios: 'axios', 
      vuex: 'Vuex',
      'vue-router': 'VueRouter',
      'element-plus': 'ElementPlus'
    };
  }
}
externalsSet(); //该方法是用来判断当前是否为打包模式的

2.2 在configureWebpack下定义externals,

  • 即打包时要忽略的外部依赖
module.exports={
	 // 自定义webpack配置
  configureWebpack: {
    externals: objExternals
  },
}

2.3 在chainWebpack下将当前页面定义的cdn值传到主页面

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

3. main.js中的使用

  • 和原有的使用方式相同,唯一区别为直接调用外部依赖包暴露出的对象,无需提前定义
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');

五.啰里啰嗦

  • Cdn的引入目前就研究这么多,基本够用,经测试,生产环境可用!
  • 如果您是内网开发用户的话(大多数是无网环境),并不推荐您使用CDN方式,还是采用原有的node_module, 等到开发完成,打包的时候,再将相关的配置改为CDN方式!
  • 如有更好的提议或描述不对的地方欢迎指出,会积极改正!