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 的分析結果：