在配置基于webpack的react单页面脚手架时,公共依赖库代码打包至vender.js中,页面逻辑代码打包至app.js中,使用webpack-bundle-analyzer分析发现,两个js中包含重复代码。优化方法如下:
webpack.config.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
})
]);