[译]webpack官网文档 ：指南 -- 8.代码分割 - 使用require.ensure

原创翻译，转载请注明出处。 

原文地址：https://webpack.js.org/guides/code-splitting-require/

 

在这一章里，我们将讨论webpack怎样使用require.ensure来分割代码。

 

require.ensure()

编译的时候，webpack对代码里的require.ensure()进行静态解析。任何一个作为一个依赖被引用，或者在回调函数里要求的模块，将会被添加到一个新的代码块里。这个代码块被写到异步包里，webpack通过jsonp按需调用它。

语法：

 

require.ensure(dependencies: String[], callback:function(require), chunkName: String)

 

 

依赖

这是一个字符串数组，在这里我们声明所有模块，确保它们在回调函数里所有的代码都能被执行之前都可用。

 

回调

一旦依赖被加载完，webpack就会执行回调函数。require函数的一个动作就是向这个函数里传递一个参数。方法体可以使用这个参数给require()模块提供执行需要的东西。

 

代码块名

由这个require.ensure()生成的代码块的名字。通过给各个require.ensure()调用传递相同的代码块名，我们可以把这些代码结合到一个代码块里，这样的话就只有一个包是浏览器必须加载的。

 

例子

让我们考虑一下下面的文件构成：

 

.
├── dist
├── js
│   ├── a.js
│   ├── b.js
│   ├── c.js
│   └── entry.js
└── webpack.config.js

 

entry.js

 

require('./a');
require.ensure(['./b'],function(require){
    require('./c');
    console.log('done!');
});

 

a.js

 

console.log('***** I AM a *****');

 

b.js

 

console.log('***** I AM b *****');

 

c.js

 

console.log('***** I AM c *****');

 

webpack.config.js

 

var path =require('path');
 
module.exports =function(env){
    return{
        entry:'./js/entry.js',
        output:{
            filename:'bundle.js',
            path: path.resolve(__dirname,'dist'),
            publicPath:'https://cdn.example.com/assets/',
            // tell webpack where to load the on-demand bundles. 
 
            pathinfo:true,
            // show comments in bundles, just to beautify the output of this example.
            // should not be used for production.
        }
    }
}

 

在这个项目上运行webpack，我们会发现webpack生成了两个包，bundle.js和0.bundle.js

entry.js和a.js被打包到bundle.js里

bundle.js

 

/******/(function(modules){// webpackBootstrap
//webpack bootstrap code...
 
/******/     // __webpack_public_path__
/******/     __webpack_require__.p ="https://cdn.example.com/assets/";
 
// webpack bootstrap code...
/******/})
/******/([
/* 0 */
/* unknown exports provided */
/* all exports used */
/*!*****************!*\
  !*** ./js/a.js ***!
  \*****************/
/***/(function(module, exports){
 
console.log('***** I AM a *****');
 
 
/***/}),
/* 1 */,
/* 2 */,
/* 3 */
/* unknown exports provided */
/* all exports used */
/*!*********************!*\
  !*** ./js/entry.js ***!
  \*********************/
/***/(function(module, exports, __webpack_require__){
 
__webpack_require__(/*! ./a */0);
__webpack_require__.e/* require.ensure */(0).then((function(require){
    __webpack_require__(/*! ./c */2);
    console.log('done!');
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
 
 
/***/})
/******/]);

 

b.js和c.js被打包到0.bundle.js里

0.bundle.js

 

webpackJsonp([0],[
/* 0 */,
/* 1 */
/* unknown exports provided */
/* all exports used */
/*!*****************!*\
  !*** ./js/b.js ***!
  \*****************/
/***/(function(module, exports){
 
console.log('***** I AM b *****');
 
 
/***/}),
/* 2 */
/* unknown exports provided */
/* all exports used */
/*!*****************!*\
  !*** ./js/c.js ***!
  \*****************/
/***/(function(module, exports){
 
console.log('***** I AM c *****');
 
 
 
/***/})
]);

 

现在只需将bundle.js加到HTML文件里并在浏览器里打开，0.bundle.js将在需要的时候由webpack加载。

更多地例子：

• https://github.com/webpack/webpack/tree/master/examples/code-splitting
• https://github.com/webpack/webpack/tree/master/examples/named-chunks  --代码块名的例子

许诺polyfill

参照7.代码分割 – 使用import()的许诺polyfill。

 

require.ensure()的一些可伸缩特性

空数组作为参数

 

require.ensure([],function(require){
    require('./a.js');
});

 

依赖作为参数

 

require.ensure(['./b.js'],function(require){
    require('./c.js');
});

 

在上面的例子里，b.js和c.js被打包到一起，并且和应用程序包分开。但是只有c.js的内容被执行了。b.js的内容只是被提供了，没有被执行。要想执行b.js，我们需要对要执行的JavaScript代码使用同步的方式像require(‘./b.js’)。

 

 -- End --