在配置基于webpack的react单页面脚手架时，公共依赖库代码打包至vender.js中，页面逻辑代码打包至app.js中，使用webpack-bundle-analyzer分析发现，两个js中包含重复代码。优化方法如下：
（1）修改入口文件的顺序，vender.js作为依赖文件应该最先引用
webpackConfig.entry = {
vender: [
‘babel-polyfill‘,
‘classnames‘,
‘react‘,
‘react-dom‘,
‘axios‘,
‘react-router‘,
‘react-router-dom‘
],
app: ‘./src/app.jsx‘
}
（2）uglifyjs-webpack-plugin、CommonsChunkPlugin
使用插件实现优化压缩功能：
webpackConfig.plugins = (webpackConfig.plugins || []).concat([
new webpack.DefinePlugin({
‘process.env‘: {
NODE_ENV: JSON.stringify(‘production‘)
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
//去除打包后代码中的注释等信息
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false
},
compress: true
}
}),
//添加打包文件时的时间戳
new webpack.BannerPlugin(bannerTxt),
//公共代码抽取
new webpack.optimize.CommonsChunkPlugin({
name: "vender",
minChunks: Infinity
})
]);
原文：https://www.cnblogs.com/sunLemon/p/9090093.html