js当中对代码拆分时require.ensure()和import()的使用介绍及对比

Posted 用脑袋行走的人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘)

 

以上是关于js当中对代码拆分时require.ensure()和import()的使用介绍及对比的主要内容,如果未能解决你的问题,请参考以下文章

为啥 webpack 代码拆分对我不起作用?

在 Webpack 和 React.js 中设置代码拆分

webpack require.ensure 按需加载

require.ensure的用法;异步加载-代码分割;

vue按需加载组件-webpack require.ensure

“NodeRequire”类型上不存在属性“确保”