Vue项目Element-UI优化-优快云博客

本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/110203512

以Vue组件Element-ui为例)
通过命令行vue ui我们可以看到项目和elment-ui所占用的大小

样式图
在这里插入图片描述

开始优化：

一、按需引入

思路：按需引入：即需要用的什么组件引用什么组件，避免占用没必要的内存

步骤：
官网中的引入

第一步：安装element-ui组件:npm i element-ui -S
第二步：在’根目录’下创建.babelrc
第三步：在main.js中完成引入

.babelrc文件

{
    "plugins": [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]
}

main.js代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import {Radio,Checkbox,input} from 'element-ui';	//需要什么组件引用什么组件
import 'element-ui/lib/theme-chalk/index.css';      //element-ui的样式


Vue.use(Radio)                //注册组件
Vue.use(Checkbox) 			  //注册组件
Vue.use(input)				  //注册组件 


Vue.config.productionTip = false


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

二、我自己的引入原理相同（单独引入）

第一步：安装element-ui组件:npm i element-ui -S
第二步：创建一个element文件夹，在其下创建index.js文件
第三步：在babel.config.js文件中配置
第四步：在main.js中完成引入

element下的index.js

//导入自己需要的组件
import { Radio, Checkbox, input } from 'element-ui'
const element = {
    install: function (Vue) {
        Vue.use(Radio)
        Vue.use(Checkbox)
        Vue.use(input)
    }
}
export default element

babel.config.js

主要体现在 plugins中

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'element-ui/lib/theme-chalk/index.css'
import element from './element/index'

Vue.config.productionTip = false

Vue.use(element)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

CDN优化:防止CDN挂掉可以引用两个CDN

第一步：在public 文件下的index.js中cdn引入（注意：element-ui的引入需要引入vue）
第二步：把main.js的import Vue from 'vue'删除或注释
第三步：创建一个vue.config.js

public下的index.js

在<head></head>中引入

<head>
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script> 
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

main.js

// import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vue.config.js

module.exports = {
    configureWebpack: {
       externals: { //外层拓展：防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
         'vue': 'Vue',
          'element-ui': 'ELEMENT',
       }
     }
  }