代码之家  ›  专栏  ›  技术社区  ›  B.Gen.Jack.O.Neill

网页树抖动和死代码消除在node_模块上有效吗?

  •  5
  • B.Gen.Jack.O.Neill  · 技术社区  · 6 年前

    考虑到这一点 Webpack 3.8.1 配置。

    // common
    module.exports = {
            context: path.resolve(__dirname, './src'),
            entry: [
                'whatwg-fetch',
                './index'
            ],
            output: {
                path: path.resolve(__dirname, 'build/assets'),
                publicPath: '/assets/',
                filename: 'main.js'
            },
            plugins: [
                new CleanWebpackPlugin(['build']),
            ],
            module: {
                rules: [{
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                    }
                }, {
                    test: /\.(scss|css)$/,
                    use: [{
                        loader: 'style-loader'
                    }, {
                        loader: 'css-loader'
                    }, {
                        loader: 'sass-loader'
                    }],
                }, {
                    test: /\.(png|jpg|gif|woff2|woff)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 8192
                            }
                        }
                    ]
                }]
            }
        };
    
    //prod
    module.exports = merge(common, {
        plugins: [
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
            }),
            new UglifyJSPlugin()
        ],
        devtool: 'none'
    });
    

    还有这个 Babel 6.26.0 配置

    {
      "presets": [
        [
          "env",
          {
            "modules": false,
            "targets": {
              "browsers": [
                ">1%"
              ]
            }
          }
        ], [
          "react"
        ]
      ],
      "plugins": [
        "transform-class-properties",
        "transform-export-extensions",
        "transform-object-rest-spread",
        "react-hot-loader/babel"
      ]
    }
    

    我原以为这棵树会随着死亡代码的消失而摇动 UglifyJS 应该以使我能够从中编写命名导入的方式工作 index.es.js 例如,模块 Material-UI-Icons 未使用的从包中删除。

    import {Menu} from 'material-ui-icons';
    

    这个库确实重新导出了包中定义的ES6模块。json as "module": "index.es.js" .

    然而,在导入单个图标后,我的包大小增加了0.5MB。当我把它改成

    import Menu from 'material-ui-icons/Menu;
    

    仅导入此图标后,捆绑包大小再次减小。

    我的配置中是否有问题,或者我是否误解了树抖动的工作原理,并且不适用于此场景?

    1 回复  |  直到 6 年前
        1
  •  4
  •   B.Gen.Jack.O.Neill    6 年前

    因此,在进一步挖掘之后,我找到了原因/临时解决方案/解决方案。基本上,因为 ES Modules 可能有副作用, Webpack 也没有 UglifyJS 可以安全地(按照规范)删除通常在 index.es.js 或类似 "module" 入口点。

    目前,有一些方法可以解决这个问题。您可以仅手动导入必要的模块,也可以使用 babel-plugin-direct-import .

    好消息是 Webpack 4 添加 support for pure modules 通过 side-effects 旗帜当图书馆作者将其标记为纯净时,摇树和缩小将按预期工作。我还建议阅读 this nice summary 关于NodeJS中的ESM规范支持。

    目前,我建议您使用 this wonderfull visualizer 并决定如何独立处理每个大型依赖项。