zoukankan      html  css  js  c++  java
  • js当中对代码拆分时require.ensure()和import()的使用介绍及对比

    webpack代码分割

    webpack 可以帮助我们将代码分成不同的逻辑块,在需要的时候加载这些代码。
    使用 require.ensure() 来拆分代码
    require.ensure() 是一种使用 CommonJS 的形式来异步加载模块的策略。在代码中通过 require.ensure([<fileurl>]) 引用模块
    require.ensure(dependencies: String[], callback: function(require), chunkName: String)
    第一个参数指定依赖的模块,
    第二个参数是一个函数,
    在这个函数里面你可以使用 require 来加载其他的模块,webpack 会收集 ensure 中的依赖,将其打包在一个单独的文件中,
    在后续用到的时候使用 jsonp 异步地加载进去。

    js懒加载

    直接上代代码吧,看着直接。
    require.ensure(['./a'],function(require){
        let b = require('./b');
        let a = require('./a');
        console.log(a+b);
    })

    以上代码,a 和 b 会被打包在一起,在代码中执行到这段代码的时候,会异步地去加载,加载完成后执行函数里面的逻辑。

     那就是说a和b合并成一个文件,代码走到这里的时候才会去下载这个文件。当然这里是不是要加一个转圈呢啥的,毕竟是异步加载嘛。
    这个稍微麻烦点,可以自己去百度。 

    webpack代码分割

    还记得webpack中的chunkFilename吗?不知道没关系。

    output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
      },

    扣了一小段代码。这个是vue脚手架里面的。在build/webpack.prod.conf.js文件中,这个是走npm run build才会进来的。

     那怎么配合chunkFilename做代码分割呢。 
    上代码:
    require.ensure(['./c'],function(require){
       let a = require('./a');
       console.log(a);
    },'d');
    require.ensure(['./c'],function(require){
       let b = require('./b');
       console.log(b);
    },'d');

    简单介绍下以上代码,这儿‘d’就是最终打包成的chunkFilename 中的name。 

    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
    name最终a,b,c会被打包到一个叫d.hash.js的文件中去。

    require.ensure()与import的区别

         在webpack 2的官网上写了这么一句话:

             require.ensure()特定于的WebPack并由进口import()取代。

        所以,在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效,所以可以简单介绍一下。包括在webpack 1中也是可以使用。

     import()

        这个的进口不同于模块引入时的导入,可以理解为一个动态加载的模块的函数(函数等),传入其中的参数就是相应的模块。例如对于原有的模块引入从 '反应' 导入写为进口('反应')但是需要注意的是,进口()会返回一个无极对象因此,可以通过如下方式使用:

        btn.addEventListener('click',e => {
    
            //在这里加载聊天组件相关资源chat.js
    
            import('/ components / chart')。then(mod => {
    
                someOperate(MOD);
    
            });
    
        });

        可以看到,使用方式非常简单,和平时我们使用的承诺并没有区别当然,也可以再加入一些异常处理:  

      btn.addEventListener('click',e => {
    
            import('/ components / chart')。then(mod => {
    
                someOperate(MOD);
    
            })。catch(err => {
    
                的的console.log('失败');
    
            });
    
        });

    当然,由于进口()会返回一个承诺对象,因此要注意一些兼容性问题。解决这个问题也不困难,可以使用一些承诺的填充工具来实现兼容。可以看到,动态导入()的方式不论在语意上还是语法使用上都是比较清晰简洁的。

    VUE使用实例

    例:require.ensure()实现
    const notFound = r => require.ensure([], () => r(require('@views/common/404')), 'index')
    const login = r => require.ensure([], () => r(require('@views/common/login')), 'index')
    const register = r => require.ensure([], () => r(require('@views/common/register')), 'index')
    const main = r => require.ensure([], () => r(require('@views/main')), 'index')
    const myWorks = r => require.ensure([], () => r(require('@views/my/index')), 'my')
    const myAccountSetting = r => require.ensure([], () => r(require('@views/my/account-setting')), 'my')
    const makeIndex = r => require.ensure([], () => r(require('@views/make/index')), 'make')
    例:import()实现
    const notFound = () => import(/* webpackChunkName: "index" */ '@views/common/404')
    const login = () => import(/* webpackChunkName: "index" */ '@views/common/login')
    const register = () => import(/* webpackChunkName: "index" */ '@views/common/register')
    const main = () => import(/* webpackChunkName: "index" */ '@views/main')
    const myWorks = () => import(/* webpackChunkName: "my" */ '@views/my/index')
    const myAccountSetting = () => import(/* webpackChunkName: "my" */ '@views/my/account-setting')
    const makeIndex = () => import(/* webpackChunkName: "make" */ '@views/make/index')
  • 相关阅读:
    解决 搭建Jekins过程中 启动Tomcat的java.net.UnknownHostException异常
    射手和农场主
    java 和 JS(javaScript)中的反斜杠正则转义
    分享修改密码的SharePoint Web part: ITaCS Change Password web part
    分享微软官方Demo用的SharePoint 2010, Exchange 2010, Lync 2010虚拟机
    Office 365 的公共网站的一些限制及解决的办法
    SharePoint 2013 关闭 customErrors
    安装 KB2844286 导致SharePoint 2010 XSLT web part 显示出现错误
    安装Office Web Apps Server 2013 – KB2592525安装失败
    如何将hyper-v虚拟机转换成vmware的虚拟机- 转换SharePoint 2010 Information Worker Demonstration and Evaluation Virtual Machine (SP1)
  • 原文地址:https://www.cnblogs.com/planetwithpig/p/13029842.html
Copyright © 2011-2022 走看看