针对 antd-design 引入组件后文件很大,使用webpack 优化
由于 antd-desgin 设置按需加载,写好的组件模块会很大,优化组件包大小有下列两种方式
- 通过 webpack 设置 externals 从外部引入 antd.js 文件(较方便、简单);
- 通过 webpack 插件 CommonsChunkPlugin 提取公共的部分(编译过程有点不太容易控制);
解决过程:
- 第一种方式,设置之后,从外部引入包后,部分 antd-design 的组件显示有异常,Tabs 组件显示异常
webpack.config.js
module.exports ={
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
'echarts': 'echarts',
'antd':'antd'
}
}
xxx.jsx 组件文件
const { Tabs } = antd
class xxx extends React.Component{
render(){
return (
<div>
<Tabs defaultActiveKey="2">
<TabPane tab={<span><Icon type="bell" />报警池</span>} key="1">
{/* 表格 */}
<WarnPoolTable height={this.props.height} />
</TabPane>
<TabPane tab={<span><Icon type="compass" />本人负责</span>} key="2">
{/* 表格 */}
<WarnPoolTable height={this.props.height} />
</TabPane>
</Tabs>
</div>
)
}
}
上述方式配置后,组件显示有异常
- 尝试第二种方式 (CommonsChunkPlugin)
webpack.config.js配置
module.exports = {
entry:{
app:'./src/index.jsx',
common_antd:['./src/components/xxx1','./src/components/xxx2','./src/components/xxx3'], // 正确打包的
},
plugins:{
new webpack.optimize.CommonsChunkPlugin({
name: "common_antd",
filename: "common_antd.js",
// chunks: [], // 不设置,默认选择所有的入口包提取公共部分
// minChunks:2 // 最小公共模块的包
}),
}
}
webpack.config.js 打包出来的结果显示 (开发环境下)
Hash: 641fcc71e2d7faf1576a
[1] Version: webpack 2.3.3
[1] Time: 135143ms
[1] Asset Size Chunks Chunk Names
[1] Demo.97e49a77.js 103 kB 2 [emitted] Demo
[1] u236.jpg 60 kB [emitted]
[1] blindfold.png 19 kB [emitted]
[1] greeting.png 22.7 kB [emitted]
[1] Navigation.8865c3be.js 115 kB 0 [emitted] Navigation
[1] Login.a5fa4bfb.js 117 kB 1 [emitted] Login
[1] userlogin.png 21.7 kB [emitted]
[1] NotFoundPage.66335af2.js 2.29 kB 3 [emitted] NotFoundPage
[1] app.641fcc71.js 559 kB 4 [emitted] [big] app
[1] common_antd.js 7.73 MB 5 [emitted] [big] common_antd
[1] app.641fcc71.css 11.5 kB 4 [emitted] app
[1] common_antd.641fcc71.css 240 kB 5 [emitted] common_antd
[1] index.html 2.24 kB [emitted]
这是我打包出来的大小,生产环境下 common_antd.js
只有 2.5MB
大小,满足我的要求
如果想更大化的减少开发环境下的打包时间,可以把上述两种方式结合在一起,减少 webpack 热加载打包时间长的问题(虽然 webpack 中已经使用了 devtool: 'eval'
) 减少打包时间,但还不够快;
参考的地址有下列几个
* http://www.jianshu.com/p/2b81262898a4
* webpack-官方例子-单入口
* webpack-官方例子-多入口
* webpack-官方文档 2.x 中文