如何在react中将延迟加载子组件的所有import语句从主包文件中拆分出来(使用webpack 4)

Question

我不确定这个标题是否合适。但这就是我想要实现的-

我已经创建了一个react可重用组件，它将返回一个特定于环境的头文件。当我说环境特定时，我的意思是，在回飞棒环境中，我需要使用一些在其他环境中不支持的特定于回飞棒的包。

我已经为此创建了两个单独的头组件，一个用于具有一些回飞棒UI shell的回飞棒环境(在其他环境中不受支持)，另一个用于其他环境。

现在，在我的CustomHeader组件中，我基于环境属性来呈现头文件。

renderDynamicHeader() {
        let {project, headerText, productName, customHeaderStyle, logoutLink, onSwitcherItemClick, headerPanel, onIconClick, logoLink, headerIcons, navigation, baseURL, features, platform, bmrgCustomIcons} = this.props;
        let {environment} = this.props;
        if(environment !== 'boomerang' && environment !== 'production' && environment !== undefined) {
            return <NonBoomerangHeader environment={environment} headertxt={headerText} selectedProject={project} productName={productName} customHeaderStyle={customHeaderStyle} logoutLink={logoutLink} onSwitcherItemClick={onSwitcherItemClick} onSwitcherItemClick={onSwitcherItemClick} headerPanel={headerPanel} onIconClick={onIconClick} logoLink={logoLink} headerIcons={headerIcons}/>
        } else {
            const BoomerangHeader = lazy(() => import(/* webpackChunkName: "BoomerangHeader" */ "../BoomerangHeader/index"));
            return (
                <Suspense fallback={<NonBoomerangHeader environment={environment} headertxt={headerText} selectedProject={project} productName={productName} customHeaderStyle={customHeaderStyle} logoutLink={logoutLink} onSwitcherItemClick={onSwitcherItemClick} onSwitcherItemClick={onSwitcherItemClick} headerPanel={headerPanel} onIconClick={onIconClick} logoLink={logoLink} headerIcons={headerIcons}/>}>
                  <BoomerangHeader environment={environment} headertxt={headerText} selectedProject={project} productName={productName} customHeaderStyle={customHeaderStyle} logoutLink={logoutLink} navigation={navigation ? navigation : undefined} baseURL={baseURL? baseURL : undefined} features={features? features : undefined} platform={platform ? platform : undefined} bmrgCustomIcons={bmrgCustomIcons} onIconClick={onIconClick}/>
                </Suspense>
            );
        }
    }

我的webpack.config.js文件中有以下配置：

const path = require('path')
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin')
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  externals: [nodeExternals()],
  output: {
    filename: 'index.js',
    publicPath: 'dist/',
    path: path.resolve(__dirname, 'dist'),
    library: '',
    libraryTarget: 'commonjs',
    chunkFilename: '[name].js'
  },
  plugins: [new CleanWebpackPlugin()],
  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'),
          },
        }],
        include: path.resolve(__dirname, './src')
      }
    ]
  }
}

但是，当我进行构建时，回飞棒头部组件的内部依赖项被附加/捆绑在主index.js文件中

这是我的BoomerangHeader.js文件中的导入语句

import React, {Component} from 'react'
import {UIShell} from '@boomerang/carbon-addons-boomerang-react';
import axios from 'axios';
import './boomerangHeader.scss';

我可以在dist文件夹的index.js文件中看到这条导出语句

(r=[{key:"renderDynamicHeader",value:function(){console.log("inside renderDynamicHeader library");var t=this.props,e=t.project,r=t.headerText,a=t.productName,l=t.customHeaderStyle,b=t.logoutLink,s=t.onSwitcherItemClick,x=t.headerPanel,d=t.onIconClick,c=t.logoLink,p=t.headerIcons,f=t.navigation,g=t.baseURL,h=t.features,_=t.platform,u=t.bmrgCustomIcons,w=this.props.environment;if("boomerang"!==w&&"production"!==w&&void 0!==w)return console.log("inside non boomerang if block"),n.a.createElement(m,{environment:w,headertxt:r,selectedProject:e,productName:a,customHeaderStyle:l,logoutLink:b,onSwitcherItemClick:s,onSwitcherItemClick:s,headerPanel:x,onIconClick:d,logoLink:c,headerIcons:p});console.log("trying to lazy load boomerang file");var v=Object(i.lazy)((function(){return o.e(0).then(o.bind(null,9))}));return console.log("successfully imported boomerang file"),console.log(v),n.a.createElement(i.Suspense,{fallback:n.a.createElement(m,{environment:w,headertxt:r,selectedProject:e,productName:a,customHeaderStyle:l,logoutLink:b,onSwitcherItemClick:s,onSwitcherItemClick:s,headerPanel:x,onIconClick:d,logoLink:c,headerIcons:p})},n.a.createElement(v,{environment:w,headertxt:r,selectedProject:e,productName:a,customHeaderStyle:l,logoutLink:b,navigation:f||void 0,baseURL:g||void 0,features:h||void 0,platform:_||void 0,bmrgCustomIcons:u,onIconClick:d}))}},{key:"render",value:function(){var t=this.renderDynamicHeader();return n.a.createElement("div",null,t)}}])&&_(e.prototype,r),a&&_(e,a),b}(i.Component)},function(t,e){t.exports=require("@boomerang/carbon-addons-boomerang-react")},function(t,e){t.exports=require("axios")}]));

我希望这个require语句单独保存在一个不同的文件中。由于延迟加载/代码拆分，也会单独创建boomerangHeader块，但是这条require语句不会被拆分到不同的文件中。

我尝试使用了webpack的splitChunks插件，但这也没有将其与主包分开。

有没有可能我们可以从这个包中删除这个require语句，并将它单独保存在其他一些文件中，这样我就可以在非自助式环境中工作时忽略该文件。或者，有什么方法可以忽略客户端应用程序中的“模块未找到”错误吗？

如果有人能在这方面帮助我，那就太好了。

Answer 1

对于如何将webpack捆绑包中的import语句拆分到一个单独的文件中，我找不到任何合适的解决方案，因为我猜这就是webpack的工作方式。我想拆分它，这样我就可以根据条件忽略那个文件。

但是，在客户端应用程序中忽略包本身似乎解决了这个问题。

if (isnotBoomerang) {
    var newClientPlugins = [];
    newClientPlugins.push(
      new webpack.IgnorePlugin(/@boomerang/)
    );
    newClientPlugins.push(
      new HtmlWebPackPlugin({
        template: APP_DIR + '/client/index.html',
      })
    );
    client['plugins'] = newClientPlugins;
  }