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$/)                )            }),这个是知乎的链接