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$/)

                )

            }),

这个是知乎的链接