Question

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

我们的Traversable

的示例

webpack.config.js

预期的行为是什么？

应该有一种从主捆绑包中排除.json文件的方法。我已经尝试了File-Loader，json-loader和const someJson = require（./ someJson）

其他相关信息： Webpack版本：4.16.1 Node.js版本：10.12.0

操作系统：Mac OS 10.14 Mojave

下面的答案（至少是我如何解决的）。没有任何数据，我无法初始化彩票。

Answer 1

预期的行为是JSON将被捆绑，因为大概在运行时需要同步它。 JSON数据不同于图像文件之类的东西，它们是由浏览器异步加载的，因为它们是通过def passwordCallback(): return "123456" smime = SMIME.SMIME() wwdrcert = X509.load_cert(wwdrpemPath) stack = X509_Stack() stack.push(wwdrcert) smime.set_x509_stack(stack) smime.load_key(str(keypemPath), pemPath,callback=passwordCallback)属性等呈现在页面上的。

如前所述，您应该使用代码拆分。如果您安装并使用src插件，则最新版本的Webpack支持dynamic imports。

@babel/plugin-syntax-dynamic-import

然后在npm install --save-dev @babel/plugin-syntax-dynamic-import中输入

：

babel.config.js

示例

假设您有一个React组件，该组件可能需要一些JSON数据，但不需要作为捆绑包的一部分同步加载。您的非代码拆分版本可能看起来像这样：

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

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

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>
  }
}

或者，您可以对dynamically import React components使用React新的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> } }和lazy API（v16.6.0及更高版本），这些API与捆绑软件分开进行分块。如果您想将组件及其对应的JSON数据一起分块，但与主捆绑包分开，则可能更可取：

Suspense

在上面的示例中，// 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>; } }及其相应的代码（包括JSON数据）仅在组件在运行时实际呈现时才加载。

Answer 2

最终，我接受了上面的答案，但是没有任何JSON数据就无法初始化抽奖活动。我最终这样做：

import React, { PureComponent } from "react"
import Lottie from 'react-lottie'

export default class AnimationAutomatedCommunication extends PureComponent {

  constructor(props) {
    super(props)
    this.state = {
      animation: <div />
    }
  }

  async componentDidMount() {
    const animation = await import(/* webpackChunkName: "AnimationAutomatedCommunication" */ './JsonData/AnimationAutomatedCommunication.json')
     const defaultOptions = {
       loop: true,
       autoplay: true,
       animationData: animation.default
     }
    this.setState({
      animation: <div className={this.props.className}>
        <Lottie key="lottie-win-jobs" options={defaultOptions}
                isStopped={this.props.isStopped} />
      </div>
    })
  }

  render() {
    return (
      <React.Fragment>
        {this.state.animation}
      </React.Fragment>
    )
  }
}

使用webpack从主捆绑包中排除JSON文件以进行react-lottie

操作系统：Mac OS 10.14 Mojave

2 个答案: