weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

Vue3系列(三)之CDN引入依赖包优化打包速率_vue3 cdn

作者：weixin_40725706 | 2024-02-29 11:41:01

踩

vue3 cdn

一.概述

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

二.CDN网站分享

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

国内
- BootCdn网站 https://www.bootcdn.cn/
- 七牛云 http://staticfile.org/
国外
- unpkg网站 https://unpkg.com
- cdnjs网站 https://cdnjs.com/
- jsdelivr网站 https://www.jsdelivr.com/

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

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>

 
 
 
 
  
  
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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'
    ]
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2.2 在configureWebpack下定义externals,

即打包时要忽略的外部依赖

 module.exports={
	 // 自定义webpack配置
  configureWebpack: {
    externals: objExternals
  },
}

 
 
1
2
3
4
5
6

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

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

 
 
1
2
3
4
5
6
7
8

3. main.js中的使用

和原有的使用方式相同,唯一区别为直接调用外部依赖包暴露出的对象,无需提前定义

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
1
2
3
4

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方式!
如有更好的提议或描述不对的地方欢迎指出,会积极改正!

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/165389