import()方法是用来代替require，实现动态加载；
实例： 要使用import()+angular路由实现动态加载, 构建工具： webpack
1、要使用import() 需要使用babel进行转换，依赖
babel-loader
babel-core
babel-plugin-syntax-dynamic-import
@babel/preset-env
2、webpack.config.js配置
module:{
rules:[{
test:
/
\.
js
$
/,
exclude:
/
(
node_modules
|
bower_components
)
/,
use: {
loader:
'babel-loader',
options: {
"presets"
: [
'@babel/preset-env'],
"plugins"
: [
"syntax-dynamic-import"]
}
}
},{...
3、路由中使用import
export
default [{
name:
'home',
url:
'/home',
controller:
'homeController',
templateProvider
: ()
=> {
return
import(
'./app/home/home.html');
},
resolve: {
deps:[
'$ocLazyLoad', (
$ocLazyLoad)
=> {
return
import(
'./app/home/home.js').
then((
module)
=>{
$ocLazyLoad.
load({
name:
module.
name
});
})
}]
}
},{.....
4、效果
切换路由到home时，按需加载home所需的js
注：
webpack需要安装html-loader才能按需加载HTML ，webpack.config.js的Loader配置
{
test:
/
\.
(
html
)
$
/,
use: [
'html-loader']
}