element-ui 按需引入包体是全部引入的3+倍

博客探讨了element-ui在项目中的按需引入和全量引入方式,通过配置babel插件实现按需加载。然而,实践表明,当按需引入组件数量达到一定规模时,其包体大小可能超过全量引入。因此,对于引入少量组件的情况,按需引入更优;而对于大量组件,全量引入可能导致更小的包体。
摘要由CSDN通过智能技术生成

element-ui 支持组件的按需引入,同时也支持全部引入。全部引入的方式:

import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
Vue.use(ElementUI);

这种写法很简单,不过为了降低 element-ui 的包体大小,通常都会使用按需引入的方式。

按需引入需要安装 babel 插件:

npm install babel-plugin-component -D

安装完后,需要在 webpack 的配置文件使用该插件:

module: {
  rules: [
    {
      //  正则表达式匹配js文件
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            "presets": [
              "@babel/preset-env"
            ],
            "plugins": [
              [
                "component",
                {
                  &#
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值