前言

引入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

Vue优化（二）、CDN/nginx高效引入node_modules包相关推荐

vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化未引入 CDN前 main.js 更改CDN方式引入在 vue.config 中引入 ...
Vue3系列(三)之CDN引入依赖包优化打包速率
目录一.概述二.CDN网站分享三.打包前后对比四.实例代码 1.index.html 页面 2.vue.config.js 2.1 cdn预设值 2.2 在configureWebpack下定 ...
使用cdn和npm引入的区别_在npm上发布自己的vue组件库（使用npm install 或者 CDN的方式引用）...
一.npm publish 发布包到npm库的命令是npm publish npm publish发布包,需要先配置webpack.json文件,如果没有webpack.json文件,可以通过npm ...
[Nginx] – 安全优化 – 配置文件优化 [二]
[Nginx] – 安全优化 – 配置文件优化 [二] Nginx 修改时间:2016年12月26日首先在此感谢下我的老师–老男孩专家拥有16年一线实战经验,为我们运维班28期所有成员的耐心讲解, ...
vue项目echarts通过cdn或npm引入
1. vue版本号: 2.6.11 2. vue-cli版本号: 4.5.11 3. 通过CDN的方式引入 3 3.1 .线上链接 1.首先先在public文件夹下的html页面中引入 <scr ...
【鲁棒优化笔记】以Coding入门鲁棒优化：以一个例子引入（二）-错误版
[鲁棒优化笔记]以Coding入门鲁棒优化:以一个例子引入(二) 投资组合的例子鲁棒优化模型的reformulation: 利用对偶进行reformulation 利用对偶进行reformulati ...
Vue优化策略_项目发布_01
文章目录一.移除console 策略 1. 命令 1.1. 插件官网: 1.2. 安装babel-plugin-transform-remove-console 1.3. 在babel.config ...
vue优化之CND优化
问题: vue 打包(npm run build)之后, vendor.js文件过大, 导致首页加载速度非常慢, 影响体验效果, 原因是第三方库(vue , vue-router , element- ...
前端性能优化之——CDN优化加载
CDN优化加载前言一.查找资源二.资源引入三.添加配置 vue3配置 vue2配置四.去掉原有的引用拓展1:vue3.0和vue2.0的cdn包名称不一样拓展2:element-ui 不 ...

Vue优化（二）、CDN/nginx高效引入node_modules包

前言

引入

配置

结果

结束语

Vue优化（二）、CDN/nginx高效引入node_modules包相关推荐

最新文章

热门文章