webpackChunkName
import 中添加注釋們可以進行諸如給 chunk 命名或選擇不同模式的操作。只有當調用模塊導入的情況下觸發(fā)
https://webpack.docschina.org/api/module-methods/#dynamic-expressions-in-import
import(/* webpackChunkName: 'test'*/'./test')
&
test.js
export function add(x, y) {
return x + y;
}
引入test.js模塊
document.getElementById('Button').onclick = function() {
import(/* webpackChunkName: 'test'*/'./test').then(({ add}) => {
console.log(add(8, 8));
});
}
webpackPrefetch
import中預獲取/預加載模塊
https://webpack.docschina.org/guides/code-splitting/#prefetchingpreloading-modules
import(/* webpackPrefetch: true */ './LoginModal.js');//注意有兼容性問題
兩個結合一起用
document.getElementById('Button').onclick = function() {
import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ add }) => {
console.log(add(8, 8));
});
}
以上是在優(yōu)化項目中用到比較多
特殊情況下癌瘾，如不想通過entry多入口打包
import動態(tài)導入語法：可以將某個文件單獨打包觅丰，如下test被單獨打包
import(/* webpackChunkName: 'test' */'./test')
.then(({ way, count }) => {
console.log(成功！);
})
.catch(() => {
console.log('文件加載失敗~');
});
