Remember solve `antd is not defined` ant design to solve the problem of excessive packaging volume

React antd developed with a page, most after playing webpack packet size has reached 1.9M , there 500kb after gzip compression.

This is beyond the scope can afford, how can I have a small site so much bandwidth.

1. find a cause

Beginning not know antd pot, and later found some tools can provide UI to analyze part of the package of js. For example, this: https://www.npmjs.com/package/webpack-bundle-analyzer

With this tool, I saw a pack of js mostly antd brings. I confirmed my first official configured antd loaded on demand, so that should not be loaded on demand out of the question. After careful analysis and found that the main reason is the following four:

icons

antd of icons take up a great part. The reason is that under normal circumstances icons are not loaded on demand, only entirety. Many people have encountered this problem, antd official gives a workaround, a little bit of trouble, because you need to find your own quote those icon: https: //github.com/ant-design/ant-design/issues/ 12011 # issuecomment-420038579

base css

My page basically only used one table, but antd the css volume also reached several hundred kb. The reason is antd of css although you can load on demand, but some basic base css is sure to be packed. This is not to find a solution.

moment.js

I have not used moment.js, but antd uses moment.js, moment.js also takes up no small volume. This is a plugin can reduce the volume of moment.js. Webpack principle is to allow you to load only use the language pack. Plug-ins are: new new WebPACK . ContextReplacementPlugin ( / Moment [ \ / \\ ] locale $ / ,  / zh-CN / ) 

 

Lods

Also I did not use lodash, but antd uses. There is also a plugin lodash WebPACK to reduce the volume of packing: lodash-webpack-plugin

2. Use antd public cdn to solve.

It analyzed antd big reason why the above. Some will not be solved, such as css much of a problem. So naturally we can not help but think of the antd packed in, but the introduction antd by cdn it in a Web page? cdn not go to my website Bandwidth. The answer is yes, this is webpack of externals configuration. So I decided to use antd of cdn package volume to solve a big problem.

3. antd is not defined to solve the problem.

We are beginning to do so, in webpack of externals which is configured with only antd

 

  externals: {
    'antd': 'antd'
  },

 

Cdn antd then introduced in the page

<link rel="stylesheet" href="https://cdn.bootcss.com/antd/3.23.3/antd.min.css">
<script src="https://cdn.bootcss.com/antd/3.23.3/antd.min.js" type="text/javascript"></script>

After doing so, the volume of the entire package directly down to a few hundred kb, but unfortunately the opening page appeared antd is not defined. This is also the start helpless, and no online search to good solutions. Later I found out why, can not be directly introduced antd of cdn other resources before this should antd dependent also add to the mix. So what does antd dependent? First, react and react-dom is a must. Then add to the mix, there are still problems. So carefully read antd of documents, found the following:

# Supportive environment 

    modern browsers and IE9 and above (need polyfills).

    It has been strongly recommended to use the build file, so that can not be loaded on demand, and it is difficult to obtain the underlying bug-dependent modules quick fix support. 

    Note: 3.0 after the introduction of antd.js before you need to introduce yourself moment.

Tucao under this recommendation. Although it is strongly recommended to use the file has been built, but no way ah, antd load demand do indeed have a problem.

Because I used version 3.x, and it also introduced polyfills moment. After plus, finally it. And because webpack removed polyfills, react, react-dom, only the final volume of the packing of 100kb (before gzip compression).

The final code:

  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'antd': 'antd'
  },

  <link rel="stylesheet" href="https://cdn.bootcss.com/antd/3.23.3/antd.min.css">
  <script src="https://cdn.bootcss.com/babel-polyfill/7.6.0/polyfill.min.js"></script>
  <script src="https://cdn.bootcss.com/react/16.9.0/umd/react.production.min.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.24.0/locale/zh-cn.js"></script>
  <script src="https://cdn.bootcss.com/antd/3.23.3/antd.min.js" type="text/javascript"></script>

Tips Finally, with the best cdn plus fallback, when cdn unfortunately hung up, then, for another cdn.

<script>window.antd||document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.23.6/antd.min.js"><\/script>')</script>