【ES6新语法】--import()

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

}