Webpack SSR React Application拆分块

时间:2019-11-23 12:34:18

标签: reactjs webpack lazy-loading babel chunks

我正在尝试将我的React应用程序分成更多的块,以提高性能。我决定将代码拆分为不同的路径,我应该看到home〜chunk,search〜chunk,ecc ...,但是当我将应用程序编译到 / build / js 文件夹中时,我无法看到新的捆绑包。我实际上是以这种方式使用webpack 神奇的评论

const promise = await import(/* webpackMode: "lazy" */ /* webpackChunkName: "SearchbarToggle" */ `../../../src/js/modules/${this.props.scene}`);

我也将拆分的webpack.client.js留了下来:

 const config = {
        target: "web",
        watchOptions: {
            poll: true
        },
        devtool: !PRODUCTION ? 'cheap-module-source-map' : false,
        entry: {},
        resolve: {
            extensions: ['.js', '.jsx', '.scss', '.css']
        },
        output: {
            filename: '[name].min.js',
            chunkFilename: `[name].min.js`,
            path: path.join(__dirname, buildPath, 'js'),
            publicPath: '/js/'
        },
        module: {
            rules: moduleRules
        },
        node: {
            //Enable "console" only when PRODUCTION is false, otherwise it will trigger this bug:
            //https://github.com/webpack/webpack/issues/1019 (that is, the "util" package will be parsed twice
            //and the browser will show this error: "b.inherits is not a function")
            console: !PRODUCTION,
            fs:
                'empty',
            net:
                'empty',
            tls:
                'empty',
            child_process:
                'empty'
        }
    };

babel能否打破与其他插件的任何冲突导致的数据块?我将babel.rc配置留在这里:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current",
          "browsers": [
            ">0.25%",
            "ie>10"
          ]
        }
      }
    ],
    [
      "@babel/preset-react",
      {
        "targets": {
          "node": "current",
          "browsers": [
            ">0.25%",
            "ie>10"
          ]
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-syntax-async-generators"
    ],
    [
      "@babel/plugin-proposal-object-rest-spread"
    ],
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties"
    ],
    [
      "@babel/plugin-proposal-export-default-from"
    ],
    [
      "@babel/plugin-transform-regenerator"
    ],
    [
      "@babel/plugin-proposal-do-expressions"
    ],
    [
      "@babel/plugin-proposal-optional-chaining"
    ]
  ]
}

0 个答案:

没有答案