隨著 web 網(wǎng)頁(yè)的流行扯键，越來(lái)越多的人選擇使用網(wǎng)頁(yè)來(lái)代替?zhèn)鹘y(tǒng)的 APP撩满，隨之而來(lái)的就是網(wǎng)頁(yè)越來(lái)越龐大葵第，前端性能的問(wèn)題尤其顯現(xiàn)圣拄。一些大的項(xiàng)目都會(huì)做一些性能優(yōu)化來(lái)提高訪問(wèn)速度嘴秸，以提升用戶(hù)的體驗(yàn)，比如：按需加載，資源優(yōu)化等岳掐。
按需加載可以提高頁(yè)面加載速度凭疮，如果當(dāng)前頁(yè)面只使用了某個(gè)功能，我們可以選擇只加載這個(gè)功能串述，避免過(guò)于龐大的包加載進(jìn)頁(yè)面而需要等等過(guò)長(zhǎng)的時(shí)間执解。
接下來(lái)我們先討論一個(gè)問(wèn)題：什么時(shí)候需要按需加載呢？
如果打包的產(chǎn)物是一個(gè)文件纲酗，這個(gè)文件又很大衰腌，一次性下載下來(lái)的速度就會(huì)比較慢，可能會(huì)造成剛進(jìn)入頁(yè)面時(shí)長(zhǎng)時(shí)間的白屏的情況觅赊，這種體驗(yàn)非常不好右蕊；如果打包成多個(gè)文件，但是瀏覽器在同一時(shí)間內(nèi)可以發(fā)出的請(qǐng)求數(shù)有限制吮螺，這也會(huì)導(dǎo)致用戶(hù)等待饶囚。按需加載就可以很好的去解決這些問(wèn)題。
那么我們?nèi)绾伟葱杓虞d呢鸠补？
簡(jiǎn)單有效的方式是使用 babel-plugin-import萝风。
什么是 babel-plugin-import?
babel-plugin-import 是阿里開(kāi)源的一款 babel 插件，它會(huì)在編譯過(guò)程中將 import 的寫(xiě)法自動(dòng)轉(zhuǎn)換為按需引入的方式紫岩，主要用于組件的按需引入规惰。
如何在項(xiàng)目中添加 babel-plugin-import?
使用方法
安裝
npm install babel-plugin-import --save-dev
配置
通過(guò) .babelrc 配置文件或者 babel-loader 引入。
{
"plugins": [["import", options]]
}
其中
options為具體的配置項(xiàng)
如果使用 babel7泉蝌，可以做如下的配置：
{
"plugins": [["import", options, "antd"]]
}
接下來(lái)一起看看具體的配置項(xiàng) options：
{
"libraryName": "antd",
"style": true, // or 'css' or 'function'
"libraryDirectory": "components", // default: lib
"camel2DashComponentName": false, // default: true
"styleLibraryDirectory": "lib",
"customName": (name: string, file: object) => {
const filename = file.opts.filename;
if (name === 'TimePicker'){
return 'antd/lib/custom-time-picker';
}
if (filename.indexOf('/path/to/my/different.js') >= 0) {
return 'antd/lib/custom-name';
}
return `antd/lib/${name}`;
}
}
libraryName 代表庫(kù)的名稱(chēng)
style 引入樣式卿拴，可以指定 css、true 或者 function
libraryDirectory 組件所在目錄梨与，默認(rèn)：lib
camel2DashComponentName 將引入的組件名轉(zhuǎn)化為"-"連接的文件名
styleLibraryDirectory 樣式文件路徑
customName 自定義導(dǎo)入文件路徑堕花，也可以是一個(gè)文件，例如：require('path').resolve(__dirname, './customName.js')
customName.js 文件如下：
module.exports = function customName(name) {
return `antd/lib/${name}`;
};
使用示例
上來(lái)講述了使用方法粥鞋，我們一起來(lái)看看配置后的結(jié)果吧缘挽！
{ "libraryName": "antd" }
import { Button } from 'antd';
import { TimePicker } from "antd"
ReactDOM.render(<Button>xxxx</Button>);
// 最后輸出結(jié)果
var _button = require('antd/lib/button');
var TimePicker = require('antd/lib/time-picker');
ReactDOM.render(<_button>xxxx</_button>);
上面只配置了
libraryName為antd，按照默認(rèn)路徑lib引入組件呻粹。
{ "libraryName": "antd", style: "css" }
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);
// 最后輸出結(jié)果
var _button = require('antd/lib/button');
require('antd/lib/button/style/css');
ReactDOM.render(<_button>xxxx</_button>);
配置
style: "css"壕曼，直接引入經(jīng)過(guò)打包后的 antd 樣式文件
{ "libraryName": "antd", style: true }
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);
// 最后輸出結(jié)果
var _button = require('antd/lib/button');
require('antd/lib/button/style');
ReactDOM.render(<_button>xxxx</_button>);
配置
style: true，在項(xiàng)目編譯階段等浊，可以對(duì)引入的 antd 樣式文件進(jìn)行編譯腮郊，從而可以壓縮打包尺寸
{
"libraryName": "antd",
"style": (name: string, file: Object) => {
if(name === 'antd/lib/utils'){
return false;
}
return `${name}/style/2x`;
}
}
配置 style: (name) =>
${name}/style/2x，引入 css 文件路徑是ComponentName/style/2x筹燕。
{
"libraryName": "element-ui",
"styleLibraryDirectory": "lib/theme-chalk",
}
import { Button } from 'element-ui';
// 最后輸出結(jié)果
var _button = require('element-ui/lib/button');
require('element-ui/lib/theme-chalk/button');
配置
"styleLibraryDirectory": "lib/theme-chalk"轧飞，指定樣式在lib/theme-chalk目錄下衅鹿。
{
"libraryName": "element-ui",
"camel2DashComponentName": false,
}
import { TimePicker } from "antd"
// 最后輸出結(jié)果
var _button = require('antd/lib/TimePicker');
配置
camel2DashComponentName: false，不會(huì)將組件名轉(zhuǎn)化為"-"連接的文件名
{
"libraryName": "antd",
"customName": (name: string, file: object) => {
const filename = file.opts.filename;
if (name === 'TimePicker'){
return 'antd/lib/custom-time-picker';
}
if (filename.indexOf('/path/to/my/different.js') >= 0) {
return 'antd/lib/custom-name';
}
return `antd/lib/${name}`;
}
}
import { TimePicker } from "antd"
// 最后輸出結(jié)果
var _button = require('antd/lib/custom-time-picker');
配置
customName过咬，可以根據(jù)指定路徑引入組件大渤。
現(xiàn)在我們可以方便地使用按需加載了，不止是開(kāi)源的組件庫(kù)掸绞，或者是我們自研的組件庫(kù)都可以使用這種方法泵三。但是也需要我們的組件庫(kù)支持，也就是說(shuō)我們的組件庫(kù)要符合一定的目錄結(jié)構(gòu)衔掸，export 導(dǎo)出也要符合規(guī)范才可以烫幕。
總結(jié)
有了 babel-plugin-import 后我們可以愉快地進(jìn)行開(kāi)發(fā)了，只需要在項(xiàng)目中配置一次就不需要關(guān)心了敞映。
