前端首屏優(yōu)化方案之一

項(xiàng)目構(gòu)建時(shí)會(huì)整體打包成一個(gè)bundle的JS文件，而有的代碼、模塊是加載時(shí)不需要的，需要分割出來單獨(dú)形成一個(gè)文件塊chunk（不會(huì)打包在main里），讓模塊懶加載（想加載時(shí)才加載），以減少應(yīng)用體積、減少加載時(shí)的體積。

import是關(guān)鍵字而非函數(shù)（類比typeof，typeof '123’ or typeof('123')）

靜態(tài)導(dǎo)入： import xxx from ''，導(dǎo)入并加載時(shí)，導(dǎo)入的模塊會(huì)被編譯，不是按需編譯

動(dòng)態(tài)導(dǎo)入：import('') 根據(jù)條件或按需的模塊導(dǎo)入

動(dòng)態(tài)導(dǎo)入應(yīng)用場(chǎng)景：

• 模塊太大，使用可能性低
• 模塊的導(dǎo)入占用了大量系統(tǒng)內(nèi)存
• 模塊需要異步獲取
• 導(dǎo)入模塊時(shí)需要?jiǎng)討B(tài)構(gòu)建路徑（路徑拼接）import('./' + a + '.js')
• 模塊中的代碼需要程序觸發(fā)了某些條件才運(yùn)行（比如點(diǎn)擊事件）

不能濫用動(dòng)態(tài)導(dǎo)入：靜態(tài)導(dǎo)入有利于初始化依賴，動(dòng)態(tài)導(dǎo)入不能用于靜態(tài)的程序分析和tree shaking

// module.js export default class MyTest {construct() {console.log('構(gòu)造器')} } <template><div><button class="test" @click="clickBtn">查看</button></div> </template><script> export default {name: "Plan",methods: {async clickBtn() {const res = await import("../libs/module.js");// import返回值是Promiseconsole.log("res", res);let myTest = res.default;new myTest();},}, }; </script>

// module.js export const plus = (a, b) => {return a + b } <script> export default {name: "Plan",methods: {async clickBtn() {import("../libs/module.js").then((res) => {const { plus } = res;console.log("plus 1 + 2 =", plus(1, 2)); // 3});},}, }; </script>

• 如果使用vite/腳手架（create react app）搭建的項(xiàng)目 → 可以直接使用import()
• 如果是手動(dòng)做webpack的配置，查看代碼分割指南
  webpack動(dòng)態(tài)導(dǎo)入
• 如果是用babel解析import() 需要安裝依賴@babel/plugin-syntax-dynamic-import（在動(dòng)態(tài)注冊(cè)vue-router時(shí)，出現(xiàn)對(duì)import的語法錯(cuò)誤，可能就是需要安裝該依賴）

react中使用

• 對(duì)于動(dòng)態(tài)import的內(nèi)容，不會(huì)直接打包進(jìn)main.js里；如果是靜態(tài)導(dǎo)入的就會(huì)直接打包進(jìn)一個(gè)js里

function Button() {// 函數(shù)里定義方法，要寫關(guān)鍵字聲明 和類不同const handleClick = async () => {// 若export default 接收到的就是default；否則接收到導(dǎo)出的const plus = await import('./index.js').then(res => res.default)// await + then 將res.default保存到resplus(1, 2)}return (<button onClick={handleClick}>getSum</button>) } ReactDOM.render(<Button />,document.getElementById('app') )

總結(jié)

以上是生活随笔為你收集整理的13 代码分割之import静动态导入的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。