開發 react 單頁面應用專案的過程中,如果不進行按需載入及打包,往往js檔案會很大,之前專案的js檔案達到7兆,頁面的載入過程變的很慢,使用者的體驗變的非常不友好,所有就蒐集了進行按需載入的方法,現在進行下總結及記錄,方便以後的覆盤使用
1.新建乙個 asynccomponent.js 檔案
2.新建 routermap.js 檔案,用於路由的管理,同時使用非同步載入元件 asynccomponentimport react, from 'react';
import from 'antd';
import headercomponent from './header';
import './async.less';
const = layout;
export default function asynccomponent(importcomponent, page)
}async componentdidmount() = await importcomponent()
this.setstate()
}render()
要進行處理 */}
專案名稱
: null)}
}return asynccomponent
}
以上就完成了,可以在專案中使用測試了import react from 'react';
import from 'react-router-dom';
import asynccomponent from './asynccomponent';
import from 'antd';
import zhcn from 'antd/es/locale/zh_cn';
import 'moment/locale/zh-cn';
// 使用第一步新建的函式,來實現元件的按需載入
const login = asynccomponent(() => import('./login'), 'login');
// 路由管理
class routemap extends react.component
}export default routemap
React 樣式 CSS模組化
css模組化,通過require引入樣式這種方式,優點是 解決了命名衝突和全域性汙染的問題 如何使用 1.安裝css loader依賴 npm install style loader css loader d2.配置webpack的css loader3.匯入和使用 footer.css foot...
React樣式的模組化
在react中,為了解決不同介面中具有相同類名導致樣式衝突的問題,從而產生了樣式的模組化,類似於vue中的scoped指令。在webpack.config.js檔案中,新增modules引數,啟用css的模組化。localidentname是設定生成的類名的格式。一般,我們使用的第三方ui元件,他們...
PHP 進行模組化設計
php include 函式與c中同名的預處理命令是不同的,它是乙個給出檔名 如 include test.php php就把檔案調用於include的位置,並方試 釋該檔案,它與函式的差別在於,只有執行include語句時,才 被解析,因此在設計中通常在if語句中包含呼叫來得用這一優點 而requ...