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

Vue 中使用externalsCDN来优化项目的体积

  • externalswebpack中的一个配置 文档说明
  • 主要是为了防止项目在打包的时候,将一些通过import引入的包也一起打包到bundle中,从而造成打包文件太大。通过运行的时候从外部获取这些包的依赖
  1. 在没有使用externalsCDN引入依赖包的时候,打包的项目代码体积比较大
    Vue 中使用externals和CDN来优化项目的体积_第1张图片

  2. 使用之后,指定的依赖项就不会被打包
    Vue 中使用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>
      
      <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> 
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> 
      <script src="https://unpkg.com/vuex">script> 
      <script src="https://unpkg.com/element-ui/lib/index.js">script> 
    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') { %>
      
      <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> 
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> 
      <script src="https://unpkg.com/vuex">script> 
      <script src="https://unpkg.com/element-ui/lib/index.js">script> 
      <% }  %>
      <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)