Ant-design-pro: Large bundle size - antd in almost every chunk

[andriijas]

Running the analyzer for ant-design-pro and inspecting all the chunks separately shows that a lof of the size is antd rebundled with every chunk. this seems to be an issue with babel-plugin-import but I was thinking we can use ant-design-pro as a real project trying to improve size reduction in antd and bundling of antd.

https://i.imgur.com/qkYctS7.png

https://i.imgur.com/B3ub7st.png

[viztor]

That should probably be in ant-design.

[afc163]

It shoud be a problem, I think we should make all antd/lib/xxx modules as vendor bundle.

[andriijas]

Okey i played with commonchunks in other project and i realized not always best performence to put all antd in seperate chunk, if only 1-2 chunks uses table its better to only let those chunks load table for example.

things you can put in antd chunk is stuff you use in many views like alert, rc-notfication etc. i tried with react-app-rewired.

// Temporary untill https://github.com/facebookincubator/create-react-app/pull/3145 is merged
const webpack = require("webpack");
const paths = require("react-scripts/config/paths");
const NameAllModulesPlugin = require("name-all-modules-plugin");
const vendors = [
  "classnames",
  "dva",
  "dva-loading",
  "moment",
  "prop-types",
  "react",
  "react-dom",
  "react-router-dom",
  "react-router-redux",
  "react-redux",
  "redux",
  "redux-saga",
];
const antd = [
  "rc-table",
  "rc-calendar",
  "rc-slider",
  "rc-progress",
  "rc-select",
  "rc-time-picker",
  "rc-trigger",
  "rc-tabs",
  "rc-pagination",
  "rc-dialog",
  "rc-notification",
  "rc-switch",
  "antd/es/alert",
  "antd/es/table",
  "antd/es/date-picker",
  "antd/es/card",
  "antd/es/modal",
  "antd/es/layout",
  "antd/es/list",
  "antd/es/grid",
  "antd/es/col",
  "antd/es/row",
  "antd/es/popconfirm",
  "antd/es/progress",
  "antd/es/tag",
  "antd/es/popover",
  "antd/es/slider",
  "antd/es/switch",
  "antd/es/icon",
  "antd/es/spin",
  "antd/es/message",
];

// -------------------------------

function getPluginIndex(config, name) {
  const index = config.plugins.findIndex(
    plugin => plugin.constructor.name === name,
  );
  return index !== -1 ? index : null;
}

 if (env === "productiond") {
    config.entry = {
      main: paths.appIndexJs,
      polyfills: require.resolve("react-scripts/config/polyfills"),
      antd,
      vendors,
    };

    config.plugins.push(new webpack.NamedModulesPlugin());

    config.plugins.push(
      new webpack.NamedChunksPlugin(chunk => {
        if (chunk.name) {
          return chunk.name;
        }
        const chunkNames = chunk.mapModules(m => m);
        chunkNames.sort((chunkA, chunkB) => chunkA.depth - chunkB.depth);
        const fileName = chunkNames[0].resource;
        return path.basename(fileName, path.extname(fileName));
      }),
    );

    config.plugins.push(
      new webpack.optimize.CommonsChunkPlugin({
        name: ["vendors", "antd"],
        minChunks: Infinity,
      }),
    );

    config.plugins.push(
      new webpack.optimize.CommonsChunkPlugin({
        name: "runtime",
      }),
    );

    config.plugins.push(new NameAllModulesPlugin());

    const etpIndex = getPluginIndex(config, "ExtractTextPlugin");
    if (etpIndex) {
      config.plugins[etpIndex].options.allChunks = true;
    }
  }

[zhujinxuan]

Why not

  new webpack.optimize.CommonsChunkPlugin({
    async: "router-commons",
    children: true,
    deepChildren: true,
    minChunks: 3
  }),

[andriijas]

its automatically fixed in webpack 4 which supports vendor splitting.

[adeelibr]

@andriijas can you give an example of vendor splitting using webpack 4 with ant-design?

[andriijas]

i only have it locally right now but i can showcase when facebook/create-react-app#4077 is merged

@adeelibr it shouldnt be hard to configure manually,
basically all you need is

  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin(),
    ],
    // Automatically split vendor and commons
    // https://twitter.com/wSokra/status/969633336732905474
    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
    splitChunks: {
      chunks: 'all',
      name: false,
    },
    // Keep the runtime chunk seperated to enable long term caching
    // https://twitter.com/wSokra/status/969679223278505985
    runtimeChunk: true,
  },