首页 文章

所有组件都捆绑在一起

提问于
浏览 次
0

我刚刚升级到webpack 4和babel 7，并注意到我的捆绑包的大小已经大大增加了 .

使用捆绑分析器，我可以看到antd，它的依赖是我的1.7mb捆绑大约1MB .
enter image description here

在开发模式下捆绑时，我可以看到所有的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" }]
  ]
}
babel antd webpack-4

1 回答

  • 0

    在开发模式下，默认情况下选项 sideEffects:true 禁用树抖动 . 在 生产环境 中测试，看看是否有效 . 要在开发中启用： - 使用导入导出 - @ babel / preset-env设置为 modules: false . - 在pkg.json中添加 sideEffects:false . 或者，该数组接受相关文件的相对，绝对和glob模式 .

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

    回复于

相关问题