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

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

  1. 在没有使用externals和CDN引入依赖包的时候，打包的项目代码体积比较大
    在这里插入图片描述

  2. 使用之后,指定的依赖项就不会被打包
    在这里插入图片描述

  3. 在vue.config.js中对项目进行配置

    • 说明：'vue':'Vue'的写法主要是因为项目中导入的import Vue from "vue"
    • 引号前面的是项目中使用到的第三方引入的包名
    • 引号后面的会从引入的CDN中查找相应的变量
    modules.exports = {
	...
	configureWebpack: {
		...
		externals: {
			'vue': 'Vue',
			'vue-router': 'VueRouter',
			'vuex':'Vuex',
			"element-ui": "ELEMENT"
		}	
	}
}

  4. 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>

  5. 注意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
  1. 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')
			}
		}
	},
	...
}
  2. 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.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue