【ES6新语法】--import()

最新推荐文章于 2026-05-16 09:05:16 发布

原创最新推荐文章于 2026-05-16 09:05:16 发布 · 6.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

ES6

angularJS

本文介绍了如何使用ES6的import()方法来实现动态加载模块，特别是在结合webpack和angular路由的情况下。内容包括使用import()的必要条件，如需Babel转换，webpack的配置调整，以及在路由中应用import()实现按需加载的功能。当切换到home路由时，只会加载对应的home.js文件。

import()方法是用来代替require，实现动态加载；

实例：要使用import()+angular路由实现动态加载, 构建工具： webpack

1、要使用import() 需要使用babel进行转换，依赖

babel-loader

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