NUXTJS中按需加载element-ui

发表于 | 阅读次数:

前言

因为生活和工作方面原因,虽然有时还是在学习,但是开年后一直好久没有写文章了。简单地写点什么吧。

问题

通常我们在使用element-ui时都进行全局的加载,但是这会导致打出的包过大。所以为了减少包体积,我们进行按需加载。关于怎么实现按需加载,element-ui官方讲得很清楚,http://element-cn.eleme.io/2.3/#/zh-CN/component/quickstart。但是,并没有说怎么在nuxtjs中使用element-ui按需加载。(页面最后将了怎么使用nuxtjs使用element-ui,但是是全局加载)。

解决方案

  • 尝试(一)

    主要配置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    //babel部分
     {
         presets: [
             ["es2015", {modules: false}],
             "stage-2"
         ],
         plugins: [
              "transform-vue-jsx",
              "transform-runtime",
              [
                   "component",
                   {
                        "libraryName": "element-ui",
                        "styleLibraryName": "theme-chalk"
                   }
              ]
         ]
     }
     //vendor部分
      vendor: ['axios', 'vue-lazyload', 'element-ui']
      
      //~plugins/element-ui.js
      import Vue from 'vue';
      import { Button } from 'element-ui'
      Vue.component(Button.name, Button)

打包后结果:

分析:

可以看出element-ui还是把全部都打包进去了,而不是按需加载了Button组件,这是为什么呢?

最终方案:

修改配置将vendor中的element-ui改为~plugins/element-ui:

1
vendor: ['axios', 'vue-lazyload', '~plugins/element-ui']

修改后结果:

修改后分析:

可以看见已经实现了按需加载。那为什么配置为~plugins/element-ui就能实现呢。其实,这和webpack的tree-shaking有关。当我们设置为element-ui时,打包过程中webpack会对element-ui进行tree-shaking处理。但是,element-ui默认会引用所有的组件,所以这时候tree-shaking并不会删减组件,起到按需加载的作用。但是当我们设置为~plugins/element-ui时,因为该文件中只使用了Button组件,使用tree-shaking会删除其他没有使用的组件,起到按需加载的作用。

提示:

使用tree-shaking需要注意1. 配置modules: false。2.压缩代码。 结束~~~