Webpack之Code Splitting 代码分块

如何实现代码分块

默认情况webpack会将资源文件打包成一个js文件，比如app.bundle.js

实际情况我们需要按需加载

方法如下：

require.ensure(dependencies, callback)

require.ensure(["module-a", "module-b"], function(require) {
    var a = require("module-a");
    // ...
});

这种方式只加载组件，不会执行，除非你在callback里require了该组件。

require(dependencies, callback)

require(["module-a", "module-b"], function(a, b) {
// ...
});

会加载组件并立即执行

例子：

创建三个文件

main.js，firstScript.js和secondScript.js

 

main.js的内容

require.ensure(["./firstScript.js"], function(require) {
});

require(["./secondScript.js"], function(require) {
});

firstScript.js的内容

window.a = 1;

secondScript.js

window.b = 1;

运行webpack

webpack -w

 打开开发者工具在network中会看到代码分为了三个块加载。并且在console中可以直接运行b，但无法运行a。

如何配置分块

在webpack.config.js中设置chunkFilename可以配置命名规则

    output: {
        path: './bin',
        filename: 'app.bundle.js',
        publicPath: "/finley/JS/WebPack/bin/",
        // chunkFilename: '[id].[chunkhash].js',
        // chunkFilename: '[name].[chunkhash].js',
    },

如何在模版中全部引入分块文件？

在webpack配置文件中添加

  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ]

这样会将所有的依赖文件放到vendor.bundle.js中

在模版中

<script src="vendor.bundle.js"></script>
<script src="bundle.js"></script>

 

参考：http://webpack.github.io/docs/code-splitting.html