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