webpack 2.x 之 CommonsChunkPlugin

针对 antd-design 引入组件后文件很大，使用webpack 优化

由于 antd-desgin 设置按需加载，写好的组件模块会很大，优化组件包大小有下列两种方式

1. 通过 webpack 设置 externals 从外部引入 antd.js 文件(较方便、简单);
2. 通过 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 中文