Vue 中使用`externals`和`CDN`来优化项目的体积

externals是webpack中的一个配置文档说明
主要是为了防止项目在打包的时候，将一些通过import引入的包也一起打包到bundle 中，从而造成打包文件太大。通过运行的时候从外部获取这些包的依赖

在没有使用externals和CDN引入依赖包的时候，打包的项目代码体积比较大
使用之后,指定的依赖项就不会被打包
在vue.config.js中对项目进行配置
- 说明：'vue':'Vue'的写法主要是因为项目中导入的import Vue from "vue"
- 引号前面的是项目中使用到的第三方引入的包名
- 引号后面的会从引入的CDN中查找相应的变量
```
modules.exports = {...configureWebpack: {...externals: {'vue': 'Vue','vue-router': 'VueRouter','vuex':'Vuex',"element-ui": "ELEMENT"}   }
}
```

index.html中引入

<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><%= webpackConfig.name %></title><!-- 引入样式 elementUI --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!--vue-router --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue --><script src="https://unpkg.com/vuex"></script> <!--vuex --><script src="https://unpkg.com/element-ui/lib/index.js"></script> <!-- elementUI -->
</head>

注意elementUI的使用有所不同，在全部导入的时候我们在main.js中的写法是

import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
Vue.use(ElementUI)

但是使用externals之后就需要改变

import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
// import ElementUI from "element-ui"
// import "element-ui/lib/theme-chalk/index.css"
// Vue.use(ElementUI)

方式二,在`vue.config.js`中判断是否是开发还是生产,根据环境不同设置`externals`

vue.config.js

// 配置 externals
const externalsConfig = () => {return {vue: 'Vue','vue-router': 'VueRouter',vuex: 'Vuex','element-ui': 'ELEMENT',AMap: 'AMap',AMapUI: 'AMapUI',mavonEditor: 'mavonEditor'}
}
module.exports = {...configureWebpack: {externals: process.env.NODE_ENV === 'production' ? externalsConfig() : {},name: name,resolve: {alias: {'@': resolve('src')}}},...
}

index.html
<% if(process.env.NODE_ENV === 'production') { %>用来判断是生产环境

<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><%= webpackConfig.name %></title><% if(process.env.NODE_ENV === 'production') { %><!-- 引入样式 elementUI --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!--vue-router --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue --><script src="https://unpkg.com/vuex"></script> <!--vuex --><script src="https://unpkg.com/element-ui/lib/index.js"></script> <!-- elementUI --><% }  %><script src="https://webapi.amap.com/maps?v=1.4.8&key=466cfc09695269cb432af38420bfebe0"></script><script src="//webapi.amap.com/ui/1.0/main.js"></script>
</head>

Vue 中使用externals和CDN来优化项目的体积相关推荐

Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)
Vue 配置使用 externals 使用cdn减小打包体积在 vue.config.js 中书写配置 // 引入webpackconst webpack = require('webpack') ...
【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积
CDN(Content Delivery Network)即内容分发网络,是一种通过在全球范围内分布式部署服务器来加速网络内容传输的技术.CDN加速的原理是,当用户请求访问某个资源时,CDN会根据用户 ...
【Vue】Vue中mixins的使用方法及实际项目应用详解
文章目录 (1)mixin基础 (2)mixin特点 1.选项合并 2.方法和参数在各组件中不共享 (3)mixin与vuex的区别 (4)mixin与公共组件的区别 (5)项目实践 (6)总结 (1 ...
Vue中3.0版本严格模式运行项目报错
vue3.0脚手架搭建项目在运行中报错,如下: 造成报错的原因是,vue3.0脚手架搭建项目的时候使用了严格模式 eslint,然后代码中我们使用了换行这些,就会导致项目运行出错这个时候我们找到pa ...
vue中axios设置表单头_VUE项目axios请求头更改Content-Type操作
我就废话不多说了,大家还是直接看代码吧~ const httpServer = (opts, data) => { const token = localStorage.getItem('tok ...
Vue 中CodeMirror使用方法
2021的Vue 中CodeMirror使用方法. 1.包括项目的安装 .官网地址. package.json信息 2.基本使用:引入方法.参数注释.案例 2018的Vue-CodeMirror. 1 ...
antd vue关闭模态对话框_如何在Bootstrap项目中用Vue.js替代jQuery
Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...
vue spa php,在Vue中有关SPA首屏加载优化（详细教程）
本篇文章主要介绍了浅谈Vue SPA 首屏加载优化实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧写在前面本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一 ...
什么是seo、vue中如何优化seo ？
目录 1.1- SEO的概念 1.2- SEO的用途 1.3- 优化SEO的两类方式黑帽白帽 1.4-具体实现(以白帽为例) 1.5 vue中如何给SPA做SEO 1.1- SEO的概念 SEO ...

Vue 中使用externals和CDN来优化项目的体积

Vue 中使用`externals`和`CDN`来优化项目的体积

方式二,在`vue.config.js`中判断是否是开发还是生产,根据环境不同设置`externals`

Vue 中使用externals和CDN来优化项目的体积相关推荐

最新文章

热门文章

Vue 中使用externals和CDN来优化项目的体积

Vue 中使用externals和CDN来优化项目的体积

方式二,在vue.config.js中判断是否是开发还是生产,根据环境不同设置externals

Vue 中使用externals和CDN来优化项目的体积相关推荐

最新文章

热门文章

Vue 中使用`externals`和`CDN`来优化项目的体积

方式二,在`vue.config.js`中判断是否是开发还是生产,根据环境不同设置`externals`