标签: code-splitting

我在React中使用Webpack的代码拆分功能.我正在构建一个应用程序,用户将选择一个选项,相应的React组件将呈现.但是,我发现使用CommonJs require.ensure仅适用于硬编码字符串.当我使用变量时,似乎它正在工作,组件切换出来.但是,当我查看网络选项卡时,我发现它没有拆分代码 - 它不会加载任何新的包.当我硬编码时,每次都有一个新的捆绑呼叫.

这是什么工作:

executeDynamic(component){
    var that = this;
    switch(component){  
        case 'SolidButton':
            require.ensure([], function(require){
                DynamicModule = require(`./elements/SolidButton/index.js`);
                that.forceUpdate();
            });
            break;
        case 'ThreeDButton':
            require.ensure([], function(require){
                DynamicModule = require(`./elements/ThreeDButton/index.js`);
                that.forceUpdate();
            });
            break;
        case 'NoPreview':
            require.ensure([], function(require){
                DynamicModule = require(`./elements/NoPreview/index.js`);
                that.forceUpdate();
            });
            break;
        default:
            break;
    }       
}

这是我想要的工作:

executeDynamic(component){
    var that = this;
    require.ensure([], function(require) {
        DynamicModule = require(`./elements/${component}/index.js`);
        that.forceUpdate();
    });
}

我正在使用gulp,我想知道它是否具有代码拆分功能.类似于webpack网站中提到的内容.我看过网上但看不到任何专门的东西.

我有一个使用webpack构建的应用程序,它使用代码分割.我现在想要将所有符合特定条件的通用模块(在本例中node_modules)聚合在所有条目块和所有子块(通过代码拆分生成)到一个单独的公共块中.

如果我这样做:

new webpack.optimize.CommonsChunkPlugin({
    children: true,
    async: 'vendor',
    minChunks: (module) => {
        const isVendor = module.context.split('/').some(dir => dir === 'vendor');
        return isVendor;
    },
}),

Webpack会将与该minChunks函数匹配的所有模块聚合到一个单独的公共块中,但仅适用于来自子块的模块 - 它不会将模块从条目块聚合到公共块中.结果,我有重复的模块出现在我的入口块和公共块中.

这怎么可能？

示例:https://github.com/OliverJAsh/webpack-commons-vendor/blob/f524bfdb0e047161c453a6b84f89ab6d25d6c648/webpack.config.js

我有这样的应用程序结构:

??? /dashboard
?   ??? dashboard.css
?   ??? dashboard.html
?   ??? dashboard.component.ts
?   ??? dashboard.service.ts
?   ??? index.ts
??? /users
?   ??? users.css
?   ??? users.html
?   ??? users.component.ts
?   ??? users.service.ts
?   ??? index.ts
??? /login
?   ??? login.css
?   ??? login.html
?   ??? login.component.ts
?   ??? login.service.ts
?   ??? index.ts
??? app.component.ts
??? app.module.ts
??? app.routes.ts
??? app.styles.css

我想将我的应用程序代码拆分成这样的代码:

??? dashboard.js
??? users.js
??? login.js
??? app.js

我似乎无法找到一个如何用webpack做这个的例子.所以2个问题.可以这样做吗？而且,如何做到这一点？

任何线索或帮助将不胜感激.我整个上午一直在研究这个问题.

Angular文档在这里提出了建议,但没有我能找到的示例或教程.所以这是可能的,但没有人知道该怎么做？

你可以在这里找到webpack配置

Webpack有一个代码拆分feture(使用require.ensure或System.import),它使我们动态加载我们的js文件.但是我想知道是否有任何方法可以动态加载css文件？

它是如此奇怪,因为我动态加载我的js文件,而我只加载我的CSS文件一次.

在我的项目中,我在单独的条目中创建我的css文件,并使用extractTextPlugin将它们编译为额外的css文件.并将它们加载到链接标记中.

我正在使用React Loadable对我的组件进行代码拆分,但问题是某些组件是从多个位置引用的.例如,我有这个组件CarsModule,在这样的多个区域中引用:

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../../../../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../../../../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

最终发生在dist/react-loadable.json …

我正在使用惰性来拆分路线，我想知道是否有任何办法可以使惰性和悬念的加载进度。

目前，我正在像这样使用它。

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

function App() {
  return (
    <Router>
      <Switch>
        <Suspense fallback={<div>loading</div>}>
          <Route path="/" exact={true} component={Home} />
          <Route path="/About" component={About} />
        </Suspense>
      </Switch>
    </Router>
  );
}

？但我想显示加载进度（例如youtube）。
？我有什么办法可以检索例如下面的示例的进度。

<Suspense fallback={({progress}) => <LoadingBar progress={progress}/>}>

在使用 Webpack 5 ( SplitChunksPlugin ) 对Angular 进行代码拆分时，互联网上似乎存在很大的空白。

我已经阅读了谷歌搜索“代码拆分角度 webpack”的第一页和第二页上的几乎所有资源，其中包括反应教程。但是，我无法理解它的要点，因为那里有很多相互矛盾的方法。

我有一个这样的应用程序结构：

app/    
    modules/
        ...
        ...
        name/
            - name.component.ts
            - name.component.html
            - name.module.ts
            - name.service.ts
    app.module.ts
    app-routing.module.ts
    main.ts
    app.component.ts
app.js    
webpack.config.js

我已经延迟加载了我的所有模块。现在我想对模块本身（组件及其依赖项等）进行代码拆分。

令我困惑的是“如何动态加载这些依赖项？”

我正在使用HtmlWebpackPlugin动态添加我生成的 javascript 到我的 index.html 文件。

Index.html：

<body>
    <!-- outlet! -->
    <my-app></my-app>   
</body>

后HtmlWebpackPlugin已经产生了JavaScript的文件：

<body>
    <!-- outlet! -->
    <my-app></my-app>   
    <script type="text/javascript" src="/dist/main.bundle.js?7e402ab94c22169960b7"></script>
    <script type="text/javascript" src="/dist/vendor.bundle.js?7e402ab94c22169960b7"></script>
</body>

main.bundle.js是我的项目代码，vendor.bundle.js而是 node_modules 等。

然而，这是一个相当大的项目，大约 23mb 的初始页面加载（是的，23 ...）这就是为什么我需要对这个项目进行代码拆分。

我的第一个问题是：由于所有内容（供应商和主包 …

我正在使用 webpack 4.43.0。

如何防止在 webpack 中发生代码拆分？所有这些文件被创建-0.bundle.js多达11.bundle.js（旁边的预期bundle.js），当我运行webpack。这是我的 webpack 配置：

/* eslint-env node */

const path = require('path');

module.exports = {
    entry: './media/js/src/main.jsx',
    mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
    output: {
        path: path.resolve(__dirname, 'media/js'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                include: path.resolve(__dirname, 'media/js/src'),
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            }
        ]
    }
};

我有一个正在运行的 React 应用程序，我想使用 React.lazy 添加基于路由的代码拆分。

目前我的代码是，

import { PureComponent, cloneElement, Suspense, lazy } from 'react';
...
export const CartPage = lazy(() => import(/* webpackMode: "lazy", webpackPrefetch: true */ 'Route/CartPage'));
...
<Suspense fallback={ this.renderFallbackPage() }>
    <NoMatchHandler>
       <Switch>
          ...
             <Route path="/cart" exact component={ CartPage } />
          ...
       </Switch>
    </NoMatchHandler>
</Suspense>

这里只提到了相关部分，以使其紧凑。

现在的问题是，在 webpack-dev-server 中，它运行得很好，但是当我运行 npm run build 并转到/cart代码中断时。按照提到的错误链接后，这是消息

Element type is invalid. Received a promise that resolves to: function i(e){var r;return
r=t.call(this,e)||this,T()(y?!e.wrapperProps[d]:!e[d],"Passing redux store in props has
been …