目录
注意!!!注意!!!注意!!! 本文是基于Webpack和VueCli 4 打包
一.概述
- 使用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（开发版，代码进行了压缩）
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方式!
- 如有更好的提议或描述不对的地方欢迎指出,会积极改正!
目录
注意!!!注意!!!注意!!! 本文是基于Webpack和VueCli 4 打包
一.概述
- 使用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（开发版，代码进行了压缩）