code-splitting(webpack v4 & react v16.8)

技术在更新，业务在增加，需求也在变化，weback v1 的版本已经不再适合现有的业务，决定对 webpack 做一次升级。

• webpack v1 -> webpack v3 的升级

webpack v3 一下的版本 code-splitting 基于 CommonsChunkPlugin 和 require.ensure 而实现。弊端就是 css 分离以及 css 修改对 chunkHash 的影响，以及开发环境下热加载的速度有一个质的飞越。

// routes
<Route path="/" getComponent={(state, cb) => {
	require.ensure([], require => {
		cb(null, require('./pages/index').default);
	}, 'index');
}}/>

// webpack.config.js
output: {
	path: path.join(__dirname, '/dist/'),
	publicPath: '/',
	filename: ‘static/js/[name].[chunkhash:8].js’,
	chunkFilename : ‘static/js/[name].[chunkhash:8].js’
},
plugins: [
	new webpack.optimize.CommonsChunkPlugin({
		names: ['vendor'],
		minChunks: Infinity,
		filename: ‘static/js/vendor.[chunkhash].js’,
	}),
	new webpack.optimize.CommonsChunkPlugin({
		names: ['manifest'],
		filename: ‘static/js/manifest.[chunkhash].js‘,
	}),
	new webpack.HashedModuleIdsPlugin()
]

• webpack v3 -> webpack v4

关于 webpack v4 和 react v16.8 实践 code-splitting。基于 webpack v4 splitChunks 和 react v16.8 React.lazy 进行路由拆分 chunk，实现按需加载 以及
基于 mini-css-extract-plugin 实现 css 分离为单独的文件。

// routes
{
    path: '/',
    exact: true,
    component: React.lazy(() => import(/* webpackChunkName: "home/login" */'./pages/home/login'))
},
// webpack.config.js
splitChunks: {
   chunks: 'all',
   name: false,
     cacheGroups: {
         vendors: {
             test: /[\\/]node_modules[\\/]/,
             name: 'vendors',
             chunks: 'all'
         }
     }
 },

以下是打包之后 webpack-bundle-analyzer 的分析结果：