我正在努力解决react-router + webpack代码split + servicer worker(或cache)的问题.

基本上问题如下,代码拆分工作正常但有时我从sentry.io的客户那里收到错误报告,例如:

"Dynamic page loading failed Error: Loading chunk 19 failed."

我的react-router代码如下:

const errorLoading = (err) => {
    console.error('Dynamic page loading failed', err);
};

export default (
    <Route path="/" component={App}>
        <IndexRoute
            getComponent={(nextState, cb) => {
                System.import('./containers/home/home')
                    .then((module) => { cb(null, module.default); })
                    .catch(errorLoading);
            }}
        />
    </Route>
);

对于我的ServiceWorker,我使用OfflinePlugin进行以下配置:

new OfflinePlugin({
    cacheName: 'cache-name',
    cacheMaps: [
        {
            match: function(requestUrl) {
                return new URL('/', location);
            },
            requestTypes: ['navigate']
        }
    ],
    externals: [
        'assets/images/logos/slider.png',
        'assets/images/banners/banner-1-320.jpg',
        'assets/images/banners/banner-1-480.jpg',
        'assets/images/banners/banner-1-768.jpg',
        'assets/images/banners/banner-1-1024.jpg',
        'assets/images/banners/banner-1-1280.jpg', …

我创建了一个存储库,其中包含一个基本示例,如果有帮助,会触发此错误:

可加载组件-SSR

我试图使用可装载组件的SSR成立了react-router-dom 4.3.1,loadable-component 5.6.0并react-dom 16.8.1

这是我正在尝试应用的组件示例loadable-component:

import React from "react";

const About = () => <h2>About</h2>;

export default About;

这是在App组件中导入的,如下所示:

import loadable from "@loadable/component";
...
const About = loadable(() => import("./About"));

并作为道具传递到Route同一个App组成部分:

<Route path="/about/" component={About} />

但是我在Developer Tools控制台中不断收到以下警告:

警告:失败的道具类型:提供component的类型的无效道具,预期objectRoutefunction

如果我使用第一个答案中建议的替代语法:

<Route path="/about/" component={props => <About {...props} />} />

警告消失,但/about单击链接时仍然出现错误的路径:

Uncaught Error: Loading chunk About failed.
(missing: http://localhost:3000/about/About.bundle.js) …

output我的只有一项rollup.config.js：

export default {
  input: './src/Index.tsx',
  output: {
    dir: './myBundle/bundle',
    format: 'iife',
    sourcemap: true,
  },
  plugins: [
    typescript(),
    nodeResolve(),
    commonjs(),
    babel(),
    json(),
    terser(),
  ],
};

为什么 Rollup 指责我进行代码分割？ [!] Error: UMD and IIFE output formats are not supported for code-splitting builds.

我正在使用 esbuild 来使用 lit 构建我的 Web 组件。

我现在正在研究code splitting如何缩小我的包裹。

我生成了很多组件（~100），它们都具有相同的导入语句

import { LitElement, html, nothing } from "lit";
import { customElement, property } from 'lit/decorators.js';

最终将 lit 中的代码导入到我的所有组件中。

添加

chunkNames: 'chunks/[name]-[hash]',
splitting: true,
format: 'esm',

esbuild 配置使 esbuild 创建包含导入文件内容的“块”，并使每个包变得更小。正是我正在寻找的:)

但..

我导入的一些文件不在组件之间共享，只是将组件拆分为更多文件以使其更具可读性。

是否可以告诉 esbuild“不要创建此文件的块，只需将其捆绑到当前入口点”？

import { LitElement, html, nothing } from "lit"; //<-- Create a chunk of this
import { customElement, property } from 'lit/decorators.js';//<-- Create a chunk of this

import { ComponentViewModel } from './ViewModel'; //<--bundle this
import …

webpack的第一个参数有什么用途require.ensure第一个参数？

https://webpack.github.io/docs/code-splitting.html

require.ensure(dependencies, callback)

我尝试让第一个参数填充或清空,如:

require.ensure(['./module'], function() {  //filled first param

require.ensure([], function() {  //empty first param
  let module = require('./module');
  $ocLazyLoad.load([{
    name: module.default,
  }]);
});

两者都有效.那么第一个参数的用途是什么？

require.include文档中还有一个函数,我不理解这个函数的用例.任何人都可以解释一下吗？

我在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构建ReactJS应用程序.最近有兴趣使用代码分割来减少应用程序的大小.

我已经尝试实现一个包装System.import()的自定义HOC:

/* async/index.tsx */
... at a very high level looked like...
class Async extends React ... {
    componentWillMount() {
        this.props.load.then(c => {
            this.component = c;
            this.setState({loaded:true});
        }
    }
    render() {
        return this.component ? <this.component.default {...this.props} /> : <span />;
    }
}

/* async/foo/index.tsx */
import Async from 'async';
const Foo = (props) => (
    <Async
      {...props}
      load={System.import('async/foo/body')}
    />);

class Foo ... {
    ...
    render = () => <Foo myProp={'bar'} />;
}

目前我正在尝试反应加载(https://github.com/thejameskyle/react-loadable),这个包基本上做同样的事情,但有一些额外的铃声和口哨声.

问题

这两种方法在本地都可以正常工作,但在部署时不起作用.从2017年3月初开始,Webpack配置来自React-Starter-App.我的直觉告诉我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

我知道 Suspense 组件是 React-ian代码拆分方法，它使网页加载速度更快。现在，假设您有一个像这样的组件层次结构：

<App>
  <Suspense fallback={<FirstLoader/>}>
    <OuterWrapper>
      <Suspense fallback={<SecondLoader/>}>
        <InnerWrapper>
          {content}
        </InnerWrapper>
      </Suspense>
    </OuterWrapper>
  </Suspense>
</App>

首先假设只有InnerWrapper延迟加载，在第二种情况下它们都是延迟加载的。

React 是在加载InnerWrapper后延迟OuterWrapper加载，还是同时加载？具体来说，是否在加载第一个组件后推迟渲染第二个 Suspense 的回退。