前言
引入cdn当然是要先获取引入包的路径
- nginx静态资源访问
首先,将引用node_modules包放到nginx静态资源文件下,然后配置nginx.conf文件,生成访问路径。
注:相比以下两种请求高效且稳定
location /node_modules {
autoindex on;
alias 根路径/nginx-1.16.1/html/docs/static/node_modules/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
- cdnjs是一种免费的开源CDN服务,受11%以上的网站的信任,由Cloudflare提供支持。
- JS DELIVER是一种免费开源的CDN服务,支持快速、可靠、自动化访问。
引入
- 在public/index.html引入,根据自己需求引入nginx配置资源路径(强烈推荐)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--注意需要修改index.css中字体引用路径,修改为nginx配置全路径字体文件-->
<link href="https://nginx配置地址/node_modules/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
<!--...省略其他引入-->
<title><%= webpackConfig.name %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
- 在public/index.html引入,根据自己需求引入官方资源路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.2/index.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.2/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/view-design@4.5.0/dist/iview.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/view-design@4.5.0/dist/styles/iview.css">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
<title><%= webpackConfig.name %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
配置
- 在vue.config.js配置(注意:要按照如下命名,一般都是驼峰命名,存在例外)
module.exports = {
configureWebpack: {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'view-design': 'iview',
'element-ui': 'ELEMENT',
'echarts': 'echarts'
//'vue-baidu-map':'BaiduMap',
//'@babel/polyfill':'@babel/polyfill',
//'es6-promise':'ES6Promise'
}
},
}
-
在main.js中全局引用
import Vue from 'vue'
import ELEMENT from 'element-ui'
import iview from 'view-design'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
Vue.use(ELEMENT, {
size: 'small',
zIndex: 2000
})
Vue.use(iview)
Vue.use(Vuex)
Vue.use(VueRouter)
-
局部引用
//其他同理不在做示范
import { Message, Notification } from 'element-ui'
//使用
Message({
message: msg,
type: type,
duration: 5 * 1000
})
结果
可以看一下前后资源减少量是非常多的,这还是未压缩的情况下
结束语
最后给大家推荐一个据说可以帮助工程师挑选命定的开源软件openbase