import 和元件庫按需引入

2022-03-04 08:21:59 字數 3504 閱讀 1754

今天查資料查到了一些有趣的東西，記錄下來，供以後開發時參考，相信對其他人也有用。

import、require、export、module.exports 混合使用詳解

import from 'element-ui'這段**到底發生了什麼？

babel 會將這段**進行轉碼，轉碼之後是這個樣子：

var a = require('element-ui');


var button = a.button;


var select = a.select;
所以，就算我們只想使用 element-ui 的 button 和 select 這2個元件，但是實際上，我們把整個 elment-ui 庫引入進來了。

我們知道，在 element-ui 的文件裡面強調，如果要使用按需載入，就要使用 babel-plugin-component 庫。那麼 babel-plugin-component 庫又做了什麼？簡單來說，它把上面的**轉化成了下面的樣子：

import button from 'element-ui/lib/button'


import select from 'element-ui/lib/select'
這樣就只會引入 button 和 select 這兩個元件了。

類似的，e-charts 在按需引入元件的時候是這麼引入的，也是一樣的道理。

import 'echarts/lib/chart/bar';


import 'echarts/lib/chart/line';


import 'echarts/lib/chart/scatter';


import 'echarts/lib/chart/effectscatter';


import 'echarts/lib/chart/treemap';
所以，所有支援按需引入的庫，都可以用上面的方法進行按需引入元件。

在/admin這個路由下，各個元件用到 element-ui 的元件的時候，各自按需載入。這個方法是可行的，但是非常繁瑣，每次用到 element-ui 的元件都需要引入一下，然後掛載一下。

我選擇的方法是，在/admin這個路由的元件下面，按需載入全部需要的 element-ui 元件，示例**如下：

// admin.element.js


import vue from 'vue';


import row from 'element-ui/lib/row';


import col from 'element-ui/lib/col';


import table from 'element-ui/lib/table';


import tablecolumn from 'element-ui/lib/table-column';


import button from 'element-ui/lib/button';


import footer from 'element-ui/lib/footer';


import form from 'element-ui/lib/form';


import formitem from 'element-ui/lib/form-item';


import input from 'element-ui/lib/input';


import menu from 'element-ui/lib/menu';


import submenu from 'element-ui/lib/submenu';


import menuitem from 'element-ui/lib/menu-item';


import loading from 'element-ui/lib/loading';


import message from 'element-ui/lib/message';


const components = [


row,


col,


table,


tablecolumn,


button,


footer,


form,


formitem,


input,


menu,


submenu,


menuitem,


];components.foreach((component) => );


vue.use(loading.directive);


vue.prototype.$message = message;
粗看上面的**是沒有問題的，但是仔細想的話，如果每次跳轉到/admin路由下面的話，那不是每次都會安裝引入的這些元件嗎？那如果跳轉多次就會安裝多次，造成記憶體洩漏啊~~~

import vue from 'vue';


import row from 'element-ui/lib/row';


import col from 'element-ui/lib/col';


import table from 'element-ui/lib/table';


import tablecolumn from 'element-ui/lib/table-column';


import button from 'element-ui/lib/button';


import footer from 'element-ui/lib/footer';


import form from 'element-ui/lib/form';


import formitem from 'element-ui/lib/form-item';


import input from 'element-ui/lib/input';


import menu from 'element-ui/lib/menu';


import submenu from 'element-ui/lib/submenu';


import menuitem from 'element-ui/lib/menu-item';


import loading from 'element-ui/lib/loading';


import message from 'element-ui/lib/message';


// hack: 防止多次引入導致記憶體洩漏


if (!vue.hasadminpageimportedelement) );


vue.use(loading.directive);


vue.prototype.$message = message;


vue.hasadminpageimportedelement = true;


}

按需引入echarts元件

echarts元件非常多，有時候我們的業務就需要兩三個不多，這時候如果全部引入的就會導致打包過大，這時候就可以按需引入。const echarts require echarts lib echarts 引入折線圖 require echarts lib chart line 餅圖 require ...

Nuxt 中 按需引入 Element ui 元件

1.安裝 element ui npm i element ui s2.在根目錄下的plugins下建立element ui.js檔案，以下是我的檔案內容 import vue from vue import from element ui 引入分頁元件 vue.prototype.element ...

vant自動按需引入元件 推薦

通過 npm 安裝 npm i vant sbabel plugin import 是一款 babel 外掛程式，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式 安裝外掛程式 npm i babel plugin import d 在.babelrc 中新增配置 注意 webpac...