Optimization of antD, a behemoth, mainly relies on babel-plugin-import.

NPM: www.npmjs.com/package/bab…

It’s not that it’s difficult, it’s that the process is too frustrating.

According to the official website, both babelrc and babel-loader are OK as configuration nodes, so I choose babel-loader.

{
    test: /\.jsx? $/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader'.options: {
            presets: ['@babel/preset-react'].plugins: [
                '@babel/plugin-transform-runtime'['import', {
                    libraryName: 'antd'.libraryDirectory: 'es'.// Add this item to reduce 20K or so
                    style: true.// Can also be set to 'CSS'. Setting true reduces 30K}]],}}}Copy the code

The above configuration is the final form after several adjustments, using Button/Menu/Layout components, and ANTD independent chunk is 451K.

Then talk about some big holes.

Error 1: Less support is missing

I’m not less and I’m not going to use it, so it’s not configured in Webpack. But this hole was the first one to fall in.

ERROR in ./node_modules/antd/es/layout/style/index.less 1:0
Module parse failed: Unexpected character The '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Copy the code

Install a less-loader and configure:

{
    test: /\.less$/i,
    use: [
        {
            loader: 'less-loader',}].}Copy the code

Continue error:

Error 2: Indicates the version of less-loader

ERROR in ./node_modules/antd/es/button/style/index.less
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
Copy the code

This problem is caused by the excessively high version of less-Loader. The default installation is less-loader@^8, which is used for webpack5. So give me webpack4 and go down to v7.

$ npm i -D less-loader@^7
$ npm run build
Copy the code

Continue error:

Error 3: javascriptEnabled

Inline JavaScript is not enabled. Is it set in your options?
Copy the code

The javascriptEnabled option is configured as:

{
    test: /\.less$/i,
    use: [
        {
            loader: 'less-loader'.options: {
                javascriptEnabled: true	// This is wrong}}]}Copy the code

It should actually be the configuration in lessOption:

{
    test: /\.less$/i,
    use: [
        {
            loader: 'less-loader'.options: {
                lessOptions: {
                    javascriptEnabled: true,}}}]}Copy the code

Continue to report errors

Error 4: Complete pipeline requiring style processing

ERROR in ./node_modules/antd/es/button/style/index.less 5:0
Module parse failed: Unexpected token (5:0)
File was processed with these loaders:
 * ./node_modules/less-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
Copy the code

That is to say, I have to use other loader to work? Assembly line covered with:

{
    test: /\.less$/i,
    use: [
        'style-loader'.'css-loader',
        {
            loader: 'less-loader'.options: {
                lessOptions: {
                    javascriptEnabled: true}}}]}Copy the code

Can the

Antd’s Crater

In order to study Webpack, a new demo project was created, in which the full CSS reference was used in app.css according to antD’s official guidance:

@import "~antd/dist/antd.css"
Copy the code

As a result, the package has been packed with full CSS code, and the package volume has not been reduced.

The problem was that I forgot about it and almost freaked out.

But if you don’tbabel-plugin-importPack, that’s itimportCan’t be removed, otherwise the page has no style.

The above.