标签: code-splitting

我正在尝试使用rollup.js创建 2 个单独的构建：application.js和，分别dependencies.js包含我的应用程序代码和公共库代码（react、等）。react-dom

文档说我应该能够简单地使用externals: ['react', 'react-dom']并让它工作 - 但是当我检查生成的包时，我仍然最终包含了两个库的完整主体。这是我的例子app.config.js，我称之为使用rollup -c app.config.js：

我究竟做错了什么？

import babel       from 'rollup-plugin-babel'
import commonjs    from 'rollup-plugin-commonjs'
import nodeResolve from 'rollup-plugin-node-resolve'
import replace     from 'rollup-plugin-replace'
import uglify      from 'rollup-plugin-uglify'
import { keys }    from 'lodash'    

const PRODUCTION = (process.env.NODE_ENV || 'development') === 'production'
const ENVIRONMENT = JSON.stringify(PRODUCTION ? 'production' : 'development')

const EXTERNALS = {
  'react': 'React',
  'react-dom': 'ReactDOM',
}

const plugins = [ …

我的浏览器应用程序的 Web 和 Web Worker 部分之间共享了大量代码。

我怎样才能告诉 webpack 将我的代码分成公共块，以便保证结果 100% 工作？

在我告诉 webpack 生成公共块（它确实做了）之后，webworker 代码中断（在运行时失败）。即使在我修复了微不足道的“窗口未定义”错误之后，工作人员也什么都不做。

我相信这与 webpack 的“目标”选项有关，默认情况下该选项设置为“web”。但我需要“网络”目标，因为我没有纯粹的网络工作者代码。

我也不能做多个 webpack 配置，因为我不能用多个配置做常见的块...

我该怎么办？

如果有人感兴趣：我正在尝试为我的应用程序构建一个最小尺寸的构建，其中包括 monaco 编辑器（提供工作人员）：

https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md

您可以在这里（在页面底部）看到入口点由 1 个主入口文件 + 工人组成。

由于我使用的重复代码，目前至少浪费了 6 MB，并且由于这个问题目前无法拆分。那是很多浪费的流量。

有任何想法吗？:)

我的 webpack 4.1.1 配置基本上是：

module.exports = (env, options) => {
    const mode = options.mode;
    const isProduction = mode === 'production';
    const outDir = isProduction ? 'build/release' : 'build/debug';

    return {

        entry: {
            "app": "./src/main.tsx",
            "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
            "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker.js'
        },
        output: {
            filename: "[name].bundle.js",
            path: `${__dirname}/${outDir}`, …

考虑如下所示的 react-admin 应用程序。我打算代码分离的方式，在一切都'./posts'和'./users'在用户登录之后才加载。

我计划使用我可以使用的动态 import() 语法，以便webpack 自动开始对应用程序进行代码拆分。

我看到的问题是所有应用程序组件都是使用应用程序的定义导入的。在东西的动态导入'./posts'，并'./users'因为它是在应用程序本身的进口也不会分裂。

如何设置和拆分此代码库，以便只有在用户登录后才加载'./posts'和'./users'加载内容？

import React, { Component } from 'react';
import { Admin, Resource } from 'react-admin';
import { Login } from 'ra-ui-materialui';
import { authProvider, dataProvider, i18nProvider } from './providers';
// vvv - to be loaded after the user has logged in 
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';
import { UserList, UserEdit, …

由于 webpack 4 和 react-loadable，我刚刚开始在服务器端使用代码拆分和动态导入来渲染 react 16 应用程序。

我的问题可能听起来很愚蠢，但有些事情我不太明白。

在服务器端，我在等待 webpack 加载所有模块，然后再将 html 吐出到客户端。

在客户端，在渲染加载的组件之前，我渲染了一种加载组件。

所以基本上服务器呈现加载的组件：

<div>loaded component</div>

客户端对加载组件进行水合：

<div>loading...</div>

显然，问题是 React 在 hydrate() 之后抱怨，因为服务器和客户端之间存在未命中匹配。

在几秒钟内，客户端首先呈现

<div>loading...</div>

而服务器已呈现并发送到客户端，加载组件的 html。

有人可以启发我吗？它是如何工作的？加载组件时如何防止首次渲染时出现不匹配？

对于使用块（代码分割）的 React 网站来说，最好的缓存策略是什么？

在使用块之前，我只会在 CloudFront 中将所有内容缓存一年，并且在部署新版本的网站后删除旧文件并使缓存失效。效果很好。

然而，在我开始使用块之后，我开始遇到问题。一个常见的问题是，在部署新版本的站点后，我删除了旧文件并使缓存失效。一名用户已经在旧版本的网站上处于活动状态，并且他的网站版本尝试加载不再存在的块，因此该网站对他来说崩溃了。

一种可能的解决方案是将所有旧文件保留一个月或更长时间，并在部署过程中删除所有早于 X 个月的文件。

有没有更好的办法解决这个问题。我是否缺少 CRA（Create React App）提供的 Service Worker 提供的一些特殊功能？如果我没记错的话，它提供了某种缓存清除功能。

谢谢。

react-loadable公开了一个非常好的方法，YourLoadableComponent.preload()通过该方法，您可以轻松地在组件渲染之前预加载组件（onMouseOver等）。

我可以看到我可以做类似的事情：https://github.com/pomber/react-lazy-preload-demo/pull/8/commits/126c1bf6e2a23b3e3f7eb0ffb1b4db260516643f 因此要import()手动调用，将结果存储Promise在某个变量中，然后将其传递给React.lazy()。然而，如果我想在某些类方法调用或生命周期挂钩中预加载，它可能有点过于冗长和有问题。

上述方法还有其他替代方法吗？

我正在使用 TypeScript 桶索引文件（即重新导出模式）来解决所需的循环依赖项（即循环导入），如本文所述。

然而，文章作者提到这可能会影响 Webpack v4 等捆绑程序的代码分割/树摇动。我只是想了解总体影响以及它是如何体现的？

有没有更好的方法来解决循环依赖并维护更好的代码分割/树摇动？

我试图在我的项目中引入代码分割，但我无法让它发挥作用。我得到的错误是：

我有一个 monorepo 设置，lib/其中包含我正在创建的整个 React 库的工作区，以及demo/仅导入该 React 模块并显示它的工作区，以用于测试目的。

我认为问题在于这两者如何交互以及块的输出或其他内容，但无法弄清楚。

我的文件是这样的：

lib/webpack.config.js

var path = require('path')

module.exports = {
  entry: {
    maps: './src/index.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: 'index.js',
    library: 'Map',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.[s]?css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                  localIdentName: "[name]__[local]___[hash:base64:5]",
                }
            }
          },
          'sass-loader'
        ],
        include: /\.module\.[s]?css$/
      },
      {
        test: /\.[s]?css$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        exclude: /\.module\.[s]?css$/
      },
      { …

为了给您一些背景信息，我正在开发一个 .NET 核心应用程序，并在其中一个 cshtml 中注入一个反应迷你应用程序，如下所示：

<div id="workshop" data-id=@Model></div>

<script src="~/bundles/js/workshop-bundle.js"></script>

它运行良好，但当我使用 webpack 编译时，workshop 包太大（800kb），我收到了警告。研讨会包包含一些依赖项，例如 axios、highcharts-react-official 和 highcharts/highmaps。所以我尝试将这些包分开。

在 webpack.config.js 上，我尝试在其中一个条目中使用 DependOn 。在这种情况下，研讨会依赖于 axios、highcharts-react-official 和 highcharts/highmaps，因此根据 webpack 文档，我尝试了以下操作：

webpack.config.js

entry: {
    workshop: {
      import: "./wwwroot/component/WorkshopApp.tsx",
      dependOn: ["axios", "highmaps", "highchartreact"],
    },
    highchartreact: "highcharts-react-official",
    highmaps: "highcharts/highmaps",
    axios: "axios",
  },

.cshtml：

<div id="workshop" data-id=@Model></div>
<script src="~/bundles/js/axios-bundle.js"></script>
<script src="~/bundles/js/highchartreact-bundle.js"></script>
<script src="~/bundles/js/highmaps-bundle.js"></script>
<script src="~/bundles/js/workshop-bundle.js"></script>

它生成 4 个捆绑包，但应用程序未显示，并且我没有收到任何错误。

但是，如果我将依赖项放在一个条目中，它会很好地工作：

webpack.config.js

entry: {
    workshop: {
      import: "./wwwroot/component/WorkshopApp.tsx",
      dependOn: ["workshopVendor"],
    },
    workshopVendor: [
      "axios",
      "highcharts-react-official",
      "highcharts/highmaps",
    ],
  },

.cshtml： …

我正在开发一个应用程序，它使用默认的 React 代码分割，使用 Lazy/Suspense 方法和 React Router 进行组件渲染。目前，当我导航到另一个路径时，如果网速较慢，在获取组件时会更新路径并渲染回退组件，是否有办法在当前路径上等待组件包完全下载？