資訊專欄INFORMATION COLUMN
摘要：對(duì)于大中型前端項(xiàng)目為了解耦與復(fù)用，更多的公司會(huì)選擇自己封裝組件庫(kù)，那么一次引入整個(gè)組件庫(kù)必然導(dǎo)致項(xiàng)目過(guò)大，如何按需加載則必須要做前世的插件原理項(xiàng)目地址在轉(zhuǎn)碼的時(shí)候，把整個(gè)庫(kù)的引用，變?yōu)榫唧w模塊的引用。
對(duì)于大中型前端項(xiàng)目為了解耦與復(fù)用，更多的公司會(huì)選擇自己封裝組件庫(kù)，那么一次引入整個(gè)組件庫(kù)必然導(dǎo)致項(xiàng)目過(guò)大，如何按需加載則必須要做前世 ant-design的babel插件babel-plugin-import
原理 [git項(xiàng)目地址](https://github.com/ant-design/babel-plugin-import)
在babel轉(zhuǎn)碼的時(shí)候，把整個(gè)庫(kù)‘a(chǎn)ntd’的引用，變?yōu)?antd/lib/button"具體模塊的引用。這樣webpack收集依賴module就不是整個(gè)antd，而是里面的button.
import { Button } from "antd";
ReactDOM.render();
↓ ↓ ↓ ↓ ↓ ↓
var _button = require("antd/lib/button");
ReactDOM.render(<_button>xxxx);
今生
那么自然我們的組件也可以同樣的處理，以anole-lego為例
配置 babel-loader
// 編譯添加
include: [
path.resolve(appDirectory, "node_modules/anole-lego"),
//...others
]
// 按需加載支持
// npm/yarn 安裝依賴 `babel-plugin-import` 詳細(xì)參見(jiàn)該插件使用
// 配置如下
plugins: [
["import", {
"libraryName": "anole-lego",
// libraryDirectory: "lib",
camel2DashComponentName: false, // 是否需要駝峰轉(zhuǎn)短線
camel2UnderlineComponentName: false, // 是否需要駝峰轉(zhuǎn)下劃線
customName: (name) => {
return `anole-lego/lib/components/${name}` // 核心配置 根據(jù)你自己的組件目錄配置
},
style: () => {
return false
}
}],
//...others
]
使用
import { Button } from "anole-lego";
ReactDOM.render(, mountNode);
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109913.html
摘要：測(cè)試復(fù)制至剪切板的文本測(cè)試相關(guān)文檔復(fù)制剪切板滾動(dòng)至視圖內(nèi)其實(shí)，這是一個(gè)非常方便的功能，比如說(shuō)，分頁(yè)加載后滾動(dòng)至頭部，切換頁(yè)面時(shí)切換至頭部。HeyUI組件庫(kù) 如果你還不了解heyui組件庫(kù)，歡迎來(lái)我們的官網(wǎng)或者github參觀。 官網(wǎng) github 當(dāng)然，如果能給我們一顆???，那是最贊的了！ 按需加載 當(dāng)heyui組件庫(kù)的組件越來(lái)越多的時(shí)候，按需加載的功能終于上線了。 話不多說(shuō)，先把按需...
摘要：使用該插件帶來(lái)的好處提升打包速度和項(xiàng)目體積將入口的文件中所有公共的代碼提取出來(lái)，減少代碼體積同時(shí)提升打包速度。利用緩存機(jī)制依賴的公共模塊文件一般很少更改或者不會(huì)更改，這樣獨(dú)立模塊文件提取出可以長(zhǎng)期緩存。那么，下面就來(lái)開(kāi)啟正確的打開(kāi)方式。 按需引用 外部的組件按需引用 2.啟用happypack多核構(gòu)建項(xiàng)目 3.修改source-map配置 啟用DllPlugin和DllReferen...
摘要：使用該插件帶來(lái)的好處提升打包速度和項(xiàng)目體積將入口的文件中所有公共的代碼提取出來(lái)，減少代碼體積同時(shí)提升打包速度。利用緩存機(jī)制依賴的公共模塊文件一般很少更改或者不會(huì)更改，這樣獨(dú)立模塊文件提取出可以長(zhǎng)期緩存。那么，下面就來(lái)開(kāi)啟正確的打開(kāi)方式。 按需引用 外部的組件按需引用 2.啟用happypack多核構(gòu)建項(xiàng)目 3.修改source-map配置 啟用DllPlugin和DllReferen...
摘要：使用該插件帶來(lái)的好處提升打包速度和項(xiàng)目體積將入口的文件中所有公共的代碼提取出來(lái)，減少代碼體積同時(shí)提升打包速度。利用緩存機(jī)制依賴的公共模塊文件一般很少更改或者不會(huì)更改，這樣獨(dú)立模塊文件提取出可以長(zhǎng)期緩存。那么，下面就來(lái)開(kāi)啟正確的打開(kāi)方式。 按需引用 外部的組件按需引用 2.啟用happypack多核構(gòu)建項(xiàng)目 3.修改source-map配置 啟用DllPlugin和DllReferen...
閱讀 2716·2023-04-25 17:58
閱讀 2990·2021-11-15 11:38
閱讀 2391·2021-11-02 14:48
閱讀 1200·2021-08-25 09:40
閱讀 1832·2019-08-30 15:53
閱讀 1105·2019-08-30 15:52
閱讀 1043·2019-08-30 13:55
閱讀 2445·2019-08-29 15:21
