代码分割
实例来自于webpack
假定我们有下面的项目结构
1
2
3
4
5
6
7
8
| .
├── dist
├── js
│ ├── a.js
│ ├── b.js
│ ├── c.js
│ └── entry.js
└── webpack.config.js
|
文件内容
entry.js
1
2
3
4
5
| require('./a');
require.ensure(['./b'], function(require){
require('./c');
console.log('done!');
});
|
a.js
1
| console.log('***** I AM a *****');
|
b.js
1
| console.log('***** I AM b *****');
|
c.js
1
| console.log('***** I AM c *****');
|
下面我们看一下webpack.config.js的配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| const path = require('path')
module.exports = {
entry : './js/entry.js'
,
output : {
filename : 'bundle.js'
, path : path.resolve(__dirname, 'dist')
, publicPath: './dist/'
, pathinfo : true
}
}
|
执行webpack打包之后，我们可以看到结果
我们发现，webpack打包生成了bundle.js以及1.bundle.js两个文件
查看文件的内容，我们可以发现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
(function(modules) {
__webpack_require__.p = "./dist/";
return __webpack_require__(0);
})
([
function(module, exports, __webpack_require__) {
__webpack_require__( 1)
__webpack_require__.e(1, function (require) {
__webpack_require__( 3)
console.log('done!')
})
},
function(module, exports) {
console.log('I am a')
}
]);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
webpackJsonp([1],[
,
,
function(module, exports) {
console.log('I am b')
},
function(module, exports) {
console.log('I am c')
}
]);
|
a.js的内容被打包到bundle.js之中,而b.js,c.js则位于1.bundle.js中,b.js,c.js从主入口文件中分离了出来，而且只有c.js的内容被执行了