React Router 4.x Dynamic Import and Common Chunk Optimize
search
damujiangr:
for details
related: damujiangr/preact-router-dynamic-optimize
Usage
- command:
npm start // start app
npm run build // build and analysis
- import
antd
and dynamic import, plugins: babel-plugin-import / babel-plugin-syntax-dynamic-import
// .babelrc or babel-loader option
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
],
"syntax-dynamic-import"
]
- dynamic import for react router, react-loadable
const Home = Loadable({
loader: () => import('./App'),
loading: Loading
});
<Route exact path="/" component={Home} />
- common chunk
// damujiangr: common chunk
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: Infinity,// (with more entries, this ensures that no other module goes into the vendor chunk)
}),
new webpack.optimize.CommonsChunkPlugin({
children: true,// If `true` all children of the commons chunk are selected
minChunks: 2,// The number must be greater than or equal 2 and lower than or equal to the number of chunks.
}),
- externals, a substitution of vendor, not neccesary
priority if you have multi page in separate project for reuse
// damujiangr: externals
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
}
- bundle analysis, plugins: webpack-bundle-analyzer
// damujiangr: require
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// damujiangr: bundle analyer
new BundleAnalyzerPlugin(),
TODO
- split css that not been used in home page