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

最新推荐文章于 2023-02-28 09:42:21 发布

聂曦r

最新推荐文章于 2023-02-28 09:42:21 发布

阅读量2k

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/niexier/article/details/117548195

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言

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

聂曦r

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue优化（二）、CDN/nginx高效引入node_modules包

一、cdn获取路径地址cdnjs：https://cdnjs.com/
复制链接

扫一扫

专栏目录

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

前言

引入

配置

结果

结束语

“相关推荐”对你有帮助么？