性能优化——按需引入element组件库

1、问题

        为了简化开发，提高开发效率，很多项目都会用到UI组件库。一方面提高开发速度，另一方面这些UI组件库也比较好看。但是，当项目打包运行时会发现打包体积偏大！  这是为什么呢？是因为我们把所有的UI组件都导入项目中，而项目才使用整个UI组件库20%的组件，剩下80%就显得非常浪费。我们能不能将这用到的20%的组件引入到项目中，不用的组件则不引入到项目，从而减少打包体积，提升项目响应速度。  答案是可以的！下面便是解决方法!

2、vue2 cli4实现手动按需引入组件

        (1)未引入elementUI前，通过chrome浏览器的网络查看包的体积大小

         (2)全局引入elementUI，通过chrome浏览器的网络查看包的体积大小

1.  
   import Vue from 'vue'
2.  
   import ElementUI from 'element-ui';
3.  
   import 'element-ui/lib/theme-chalk/index.css';
4.  
   Vue.use(ElementUI)

           (3)按需引入elementUI

                i. 安装按需引入所需的插件

npm install babel-plugin-component -D

                ii.找到配置文件babel.config.js

1.  
   module.exports = {
2.  
   presets: [
3.  
   '@vue/cli-plugin-babel/preset'
4.  
   ],
5.  
   "plugins": [
6.  
   [
7.  
   "component",
8.  
   {
9.  
   "libraryName": "element-ui",
10.  
    "styleLibraryName": "theme-chalk"
11.  
    }
12.  
    ]
13.  
    ]
14.  
    }

                iii. 新建plugins/index.js 文件，将需要的组件写入到Vue.use()中。为什么不直接写在main.js？因为main.js中包含很多的Vue.use()非常的不好阅读、不优雅！！

1.  
   import Vue from 'vue';
2.  
   import { Button, Select } from 'element-ui';
3.  
   Vue.use(Button)
4.  
   Vue.use(Select)

                iv.重启服务，配置文件的修改都要记得重启服务，否则配置文件不生效！

npm run serve

3、vue3 cli4实现自动按需引入组件库

        (1)未引入ElementPlus前，通过chrome浏览器的网络查看包的体积大小

        (2)全局引入ElementPlus，通过chrome浏览器的网络查看包的体积大小

1.  
   import { createApp } from 'vue'
2.  
   import App from './App.vue'
3.  
   import ElementPlus from 'element-plus'
4.  
   import 'element-plus/dist/index.css'
5.  
   const app = createApp(App)
6.  
   app.use(ElementPlus)
7.  
   app.mount('#app')

         (3)按需引入ElementPlus，通过chrome浏览器的网络查看包的体积大小

                i. 安装按需引入插件

npm install -D unplugin-vue-components unplugin-auto-import

                ii.在项目文件夹下新建vue.config.js文件.vue.config.js与src同级

1.  
   const AutoImport = require('unplugin-auto-import/webpack')
2.  
   const Components = require('unplugin-vue-components/webpack')
3.  
   const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
4.  
   module.exports = {
5.  
   configureWebpack: {
6.  
   plugins: [
7.  
   AutoImport({
8.  
   resolvers: [ElementPlusResolver()],
9.  
   }),
10.  
    Components({
11.  
    resolvers: [ElementPlusResolver()],
12.  
    }),
13.  
    ],
14.  
    }
15.  
    }

                iii. 重启服务，配置文件的修改记得重启服务

npm run serve

这篇好文章是转载于：学新通技术网