json - 使用 webpack 为 react-lottie 从主包中排除 JSON 文件

Question

在我们的 Web 应用程序中，我们有一些 JSON 文件，每个文件约 10-80k 行。这些已包含在我们的主要捆绑包中。这些由名为 react-lottie 的动画插件使用。

我们 webpack.config.js 的一个例子

module.exports = {
  entry: ["./src/index.js"],
  module: {
    rules: [
      { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader"] },
      {
        test: /\.(jpg|png|gif|ico)$/,
        use: {
          loader: "file-loader",
          options: { name: "[path][name].[hash].[ext]" }
        }
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "[name].[hash].js"
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({ hash: false, template: "src/index.html" }),
    new DashboardPlugin(),
    new CopyWebpackPlugin([
      {
        from: "src/components/Assets/BookingBar.js",
        to: "assets/BookingBar.js"
      }
    ]),
    new BundleAnalyzerPlugin()
  ],
  devServer: {
    contentBase: "./dist",
    hot: true,
    historyApiFallback: true,
    port: 4000
  }
};

什么是预期行为？

应该有一种方法可以从主包中排除 .json 文件。我试过 File-Loader、json-loader 和 const someJson = require(./someJson)

其他相关资料:
网络包版本:4.16.1
Node.js 版本:10.12.0

操作系统:Mac OS 10.14 Mojave

回答如下(至少我是如何解决它的)。没有任何数据，我无法初始化彩票。

Answer 1

预期的行为是 JSON 将被捆绑，因为它大概是在运行时同步需要的。 JSON 数据不同于浏览器异步加载的图像文件，因为它们通过 src 在页面上呈现。属性等

正如评论中提到的，您应该使用代码拆分。最新版Webpack支持dynamic imports如果您安装和使用 @babel/plugin-syntax-dynamic-import插入。
npm install --save-dev @babel/plugin-syntax-dynamic-import
然后在 babel.config.js :

module.exports = {
  ...
  plugins: [
    "@babel/plugin-syntax-dynamic-import"
  ]
  ...
};

示例

假设您有一个 React 组件，它可能需要一些 JSON 数据，但不需要作为包的一部分同步加载它。您的非代码拆分版本可能如下所示:

import React from 'react';
import myJSON from './myJSON.json';

export default class MyComponent extends React.Component {
  render() {
    return <div>{JSON.stringify(myJSON, null, 2)}</div>
  }
}

相反，您可以使用动态导入——基本上是一个运行时导入，它返回一个 Promise，您可以使用它来异步加载一些与包分开的数据:

import React from 'react';
import myJSON from './myJSON.json';

export default class MyComponent extends React.Component {
  state = {data: {}};
  componentDidMount() {
    import(/* webpackChunkName: 'myJSON' */ './myJSON.json')
      .then((data) => {
        this.setState({data});
      });
  }
  render() {
    return <div>{JSON.stringify(this.state.data, null, 2)}</div>
  }
}

或者，您可以使用 React 的新 lazy和 Suspense API(v16.6.0 及更高版本)到 dynamically import React components与捆绑包分开分块。如果您想将一个组件及其相应的 JSON 数据分块在一起，但与主包分开，这可能更可取:

// MyComponent.jsx
import React from 'react';
import myJSON from './myJSON.json';

export default class MyComponent extends React.Component {
  render() {
    return <div>{JSON.stringify(myJSON, null, 2)}</div>
  }
}

// SomeParent.jsx
import React, {lazy, Suspense} from 'react';
const MyComponent = lazy(() => import(/* webpackChunkName: 'MyComponent' */ './MyComponent'));

export default class SomeParent extends React.Component {
  render() {
    return <div>
      <Suspense fallback={<div>Loading...<div>} >
        <MyComponent />
      </Suspense>
    </div>;
  }
}

在上面的例子中， <MyComponent />及其相应的代码——包括 JSON 数据——只会在组件在运行时实际呈现时加载。