webpack代码分割（https://webpack.js.org/guides/code-splitting/）

Code Splitting代码分割

代码分割是webpack最令人信服的特性，这个特性允许你将代码分割为不同的部分，然后按需加载或者并行加载。它可以用于获得更小的打包文件、按照加载优先级控制资源，进而减少加载时间。（将原先集中到一个 output.js 中的代码，切割成若干个 js 文件，然后分别进行加载。原先只加载 output.js ，现在把代码分割到3个文件中，先加载 output.js ，然后 output.js 又会自动加载 1.output.js 和 2.output.js 。）

有3个代码分割的通用方法

》入口点：利用entry配置手动进行代码分割

》杜绝重复：利用CommonsChunkPlugin插件删除重复的代码、分割chunks代码

》动态引入： Split code via inline function calls within modules.

 一、利用entry手动分割

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: {
index: './src/index.js',
another: './src/another-module.js'
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

这种方法的缺点是：
1.分割后的压缩文件会包含重复的代码

2.不灵活，无法动态分割代码

二、Prevent Duplication

利用commonChunkPlugin插件会从各个出口文件中提取出公有的代码，例子如下：

webpack.config.js

const path = require('path');
+ const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: {
index: './src/index.js',
another: './src/another-module.js'
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
-     })
+     }),
+     new webpack.optimize.CommonsChunkPlugin({
+       name: 'common' // Specify the common bundle's name.
+     })
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

利用commonChunkPlugin插件，我们可以看到重复的代码从index.bundle.js中被移除，而在asset那一栏，多了一个common.bundle.js文件，这些是提取出的公有的代码。

Hash: 70a59f8d46ff12575481
Version: webpack 2.6.1
Time: 510ms
Asset       Size  Chunks                    Chunk Names
index.bundle.js  665 bytes       0  [emitted]         index
another.bundle.js  537 bytes       1  [emitted]         another
common.bundle.js     547 kB       2  [emitted]  [big]  common
[0] ./~/lodash/lodash.js 540 kB {2} [built]
[1] (webpack)/buildin/global.js 509 bytes {2} [built]
[2] (webpack)/buildin/module.js 517 bytes {2} [built]
[3] ./src/another-module.js 87 bytes {1} [built]
[4] ./src/index.js 216 bytes {0} [built]

三、动态引入

webpack支持2种动态代码分割的方法，第一种也是比较好的一种方法是使用es6的import特性，特定于webpack的方法是使用require.ensure特性，让我们首先演示第一种方法。

import使用了promise，所以，如果你想在缺少promise支持的浏览器上啊运行，需要引入promise polyfill

webpack.config.js

const path = require('path');
- const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: {
+     index: './src/index.js'
-     index: './src/index.js',
-     another: './src/another-module.js'
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
-     }),
+     })
-     new webpack.optimize.CommonsChunkPlugin({
-       name: 'common' // Specify the common bundle's name.
-     })
],
output: {
filename: '[name].bundle.js',
+     chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

chunkFilename，指的是给没有对应入口文件的出口文件命名。

index.js

function getComponent(){

    return import('lodash').then(_ => {

        var element = document.createElement('div');

        element.innerHTML = _.join(['hello','webpack'],' ');

        return element;

    }).catch(error => 'an error occured while loading the component');

}

getComponent().then(component => {

    document.body.appendChild(component);

})

构建后的结果为：



由上图可以看出：dist中有2个js文件，其中app1.bundle.js是index.html中引入的文件，0.bundle.js是app1.bundle.js依赖的文件，其在运行时动态加载。通过这种引入方式，加快了页面执行的速度。

Bundle Analysis

一旦你开始切割你的代码后，分析输出文件，判断文件是从哪个模块切分的，是非常重要的，最好从官方的分析工具开始入手。当然，也可以选择如下工具：

webpack-chart,    webpack-visualizer   webpack-bundle-analyzer