react antd webpack 按需加载打包后还是很大？

Question

根据官方推荐的配置：`{

            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            include: path.join(__dirname, './app'),
            loader: 'babel-loader',
            query: {
                cacheDirectory: true,
                plugins: ['transform-runtime',['import', [{ libraryName: 'antd', style: "css" }]]],
                presets:['es2015','react','stage-0']
            }
        }`
        然后各个路由按需加载。如图:
        

这是还没开启UglifyJsPlugin压缩。有1.5M。在page_a中这样引入antd:

import { Form, Table, Input, Button,Breadcrumb,Badge,Dropdown,Menu,Icon } from 'antd';

开启UglifyJsPlugin压缩后如下图:

还是有900多k。请问在后端gzip压缩之前还能进一步缩小体积么？

Answer 1

应该是 你 多个文件 依赖了相同的包 导致每一个文件都打包了多个重复的文件吧,应该用 CommonsChunkPlugin 插件 就可以解决了

            new webpack.optimize.CommonsChunkPlugin({
                name: "app",
                async: "common-in-lazy",
                children: true,
                minChunks: ({ resource } = {}) => (
                    resource &&
                    resource.includes('node_modules') &&
                    /axios/.test(resource)
                )
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: "app",
                children: true,
                async: 'used-twice',
                minChunks: (module, count) => (
                    count >= 2
                ),
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'app',
                filename: "js/common.[chunkhash:8].js",
                minChunks: ({ resource }) => (
                    resource &&
                    resource.indexOf('node_modules') >= 0 &&
                    resource.match(/\.js$/)
                )
            }),

这个是知乎的链接

Answer 2

antd就是很大，不过作为一个中台产品，gzig之后300多k应该可以接受吧

Answer 3

不推荐用 from "antd"，这样就全加载了，但是很多你用不上的。
我一般用
import {Form} from "antd/lib/form/";
....

这样麻烦一点，但会小很多。
还有，终极技能：
用一个文件把用的全挑出来，然后
import {Form,Input...} from "your-antd";