捆绑的所有组件

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