所有组件都捆绑在一起

Question

我刚刚升级到webpack 4和babel 7，并且发现我的捆绑包的大小已大大增加。

使用包分析器，我可以看到antd及其依赖项大约是我的1.7mb包中的1MB。

在开发模式下捆绑时，即使我的应用程序当前已导入单个按钮，我也可以看到所有antd组件都被包含在内

import { Button } from 'antd';
....

如何仅加载所需的内容？这是我的相关配置

//webpack.config
{
  devtool: false,
  mode: 'production',
  entry: [
    '@babel/polyfill',
    'antd/dist/antd.css',
    './js/router',
    './css/test.less',
  ],
  output: {
    path: path.resolve(__dirname, './plugins/js'),
    filename: 'app.js',
  },
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
....

并且：

//babelrc
{
  "presets": [
      ['@babel/preset-env', { 
        modules: false, 
        useBuiltIns: 'entry', 
        targets: { 
          chrome:"58", ie: "11" 
        } 
      }],
      '@babel/preset-react',
  ],
  "plugins": [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-transform-modules-commonjs',
      ["import", { "libraryName": "antd", "style": "css" }]
  ]
}

Answer 1

在开发模式下，默认情况下，选项sideEffects:true禁用树抖动。在生产中进行测试以查看是否可行。要启用开发： -使用进口出口 -@ babel / preset-env设置为modules: false。 -在pkg.json中添加sideEffects:false。另外，数组可以接受相关文件的相对，绝对和全局模式。

参考：https://webpack.js.org/guides/tree-shaking/#conclusion