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']
}