antd加载问题

[alex-my]

在使用antd的时候会有这样的提醒

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

我安装了babel-plugin-import
在config.default.js增加了配置

'use strict';

const path = require('path');

module.exports = {
  keys: 'key',
  webpack: {
    custom: {
      configPath: path.join(__dirname, './webpack.config.js'),
    },
  },
  router: {
    root: '/pages',
    entry: 'page',
  },
  react: {
    static: true,
  },
 // ------------ 加了以下内容 ------------
  isomorphic: {
    babel: {
      plugins: [
        [
          require.resolve('babel-plugin-import'),
          { libraryName: 'antd', libraryDirectory: 'es', style: 'css' },
        ],
      ],
    },
  },
};

不过运行后报错:

2018-08-09 18:16:09,304 ERROR 33391 [-/127.0.0.1/-/55ms GET /] nodejs.SyntaxError: Unexpected identifier
(function (exports, require, module, __filename, __dirname) { import Button from './button';
                                                                     ^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/zhangzuhong/Code/MyWork/beidou-boilerplate/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)

是不是babel-plugin-import配置的方法不对，我尝试了其它方式也没成功。

基于 advanced 版本。

[justquanyin]

引用了 babel-plugin-import ， 以及使用了antd 的 Button组件， 未复现出问题，如方便，能贴出可复现的代码么？ 或者加入钉钉群讨论一下

[alex-my]

引用babel-plugin-import，需要什么配置嘛。
这里就是一个引入了antd的advanced 工程，然后看到警告，就添加了babel-plugin-import，但不知道如何在beidou中配置这个插件。

[alex-my]

我写的代码在这里: https://github.com/alex-my/beidou-boilerplate
config/config.default.js 第25到28行是我的配置，但应该是没有配置正确，目前被我注释了。

[njugray]

@alex-my babel-plugin-import 是用来按需加载 antd 组件的 babel 插件，这部分功能主要用来减少js bundle的体积，对于node端意义不大。

isomorphic: {
    babel: {
      plugins: [
        [
          require.resolve('babel-plugin-import'),
          { libraryName: 'antd', libraryDirectory: 'es', style: 'css' },
        ],
      ],
    },
  },

这部分配置是对服务端生效的，你的目的应该想是在webpack打包中启用

如果想要启用 babel-plugin-import，可以这么写：

1. 修改 config/config.default.js, 启用自定义webpack配置

webpack: {
    custom: {
      configPath: path.join(__dirname, './webpack.config.js'),
    },
  },

2. 在 config/webpack.config.js 中修改babel-loader 配置，启用 .babelrc

module.exports = (app, defaultConfig /* , dev */) => {
  const babelLoader = defaultConfig.module.rules[0];

  babelLoader.use.options.babelrc = true;

  return defaultConfig;
};

defaultConfig的内容可以在 run/webpack.local.json 里查看 dump，babel-loader 是默认配置中的第一个 module.rule

3. 在 .babelrc 中添加需要的配置

{
  "plugins": [["import", {
    "libraryName": "antd",
    "style": true
  }]]
}

[ahungrynoob]

兄弟，你热加载可以用吗,就是react的模块热替换。我一直报unaccepted module

[alex-my]

目前需要手动刷新下页面，还没细看，今天周末我好好看看。

[ahungrynoob]

嗯嗯，我昨晚试了下可能是通用bug.我提个issue

[njugray]

@DXD23-SJTU simple示例

[alex-my]

@njugray 用以上方法尝试了下, 仍然会有警告

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

.babelrc文件也生效了。代码见https://github.com/alex-my/beidou-boilerplate

[njugray]

@alex-my 上述方法是antd按需加载的配置方式，至于你这个告警我无法复现，如果实在node端上打印的话，没有影响的，node上引打包还是小包没大区别

[alex-my]

这样子啊，我打包试试，谢谢。

[ahungrynoob]

@alex-my 有试着在生产环境下看看加载大小吗,我这边也是这个问题,然后试着生产环境跑了下,打包后的文件都找不到了。。。

[ahungrynoob]

我也发现没用，也没报错。。。打出来的index.js永远是2.2M无论我的组件是多还是少

[njugray]

@DXD23-SJTU
配置前：

配置后：

[yangbo5207]

配置了babel import 同样没有生效，前后打包大小没变化 ~

[justquanyin]

你用的哪个例子？ 或者把wepack的配置贴一下？

[zhoufeii]

@alex-my babel-plugin-import 是用来按需加载 antd 组件的 babel 插件，这部分功能主要用来减少js bundle的体积，对于node端意义不大。

isomorphic: {
    babel: {
      plugins: [
        [
          require.resolve('babel-plugin-import'),
          { libraryName: 'antd', libraryDirectory: 'es', style: 'css' },
        ],
      ],
    },
  },

这部分配置是对服务端生效的，你的目的应该想是在webpack打包中启用

如果想要启用 babel-plugin-import，可以这么写：

1. 修改 config/config.default.js, 启用自定义webpack配置

webpack: {
    custom: {
      configPath: path.join(__dirname, './webpack.config.js'),
    },
  },

1. 在 config/webpack.config.js 中修改babel-loader 配置，启用 .babelrc

module.exports = (app, defaultConfig /* , dev */) => {
  const babelLoader = defaultConfig.module.rules[0];

  babelLoader.use.options.babelrc = true;

  return defaultConfig;
};

defaultConfig的内容可以在 run/webpack.local.json 里查看 dump，babel-loader 是默认配置中的第一个 module.rule

1. 在 .babelrc 中添加需要的配置

{
  "plugins": [["import", {
    "libraryName": "antd",
    "style": true
  }]]
}

在启用之后再进行打包，虽然没有报错，但是也没有生效

@njugray

[alex-my]

实际上antd按需加载是实现了的，可以用webpack-bundle-analyzer这个插件看看。

实际上，无论是用babel-plugin-import还是手动引入，都这么大。
而真正大的是左侧的红框圈起来的。