Question

现在我正在使用function deleteFile() { $.ajax({ url: 'deleteFile.php', data: {'file' : "<?php echo dirname(__FILE__) . '/uploads/'?>" + file_name }, success: function (response) { // do something }, error: function () { // do something } }); } <input type='Button' value='Click to Delete File' onClick='return deleteFile()'>来控制我的路线！

您知道我尝试构建单页应用。只有一个名为的条目文件 react-route

当index.js太重时，加载时间会很长。也许10000毫秒。

但是有很多路线为什么必须首先加载它们？如果我可以懒加载路线不仅是儿童路线。

当我转到index.js路线时，它会加载 js文件管理，admin将加载 js文件约，是吗？

webpack包将有两个文件[name] .js和come.js.但它太重了。

任何人遇到同样的问题？

Answer 1

您可以通过两种方式使用react-router延迟加载React组件。

Webpack的require.ensure方式 当你采用这种方法时，你会处理像这样的反应路由器对象，

childRoutes:[
    {
      path:"/pageone",
      getComponents:(a, cb) => require.ensure([], require => {cb(null, require("pages/PageOne"));})
    },
    {
      path:"/pagetwo",
      getComponents:(a, cb) => require.ensure([], require => {cb(null, require("pages/PageTwo"));})
    }
  ]

Webpack的bundle-loader方式 当你采用这种方法时，你将处理webpack加载器选项。

module: {
  loaders: [{
    test: /.*/,
    include: [path.resolve(__dirname, 'pages/admin')],
    loader: 'bundle?lazy&name=admin'
   }]
}

您可以在react-router找到使用bundle-loader的{{3}}，example是一个关于使用bundle-loader进行延迟加载的好博客，here是一个require.ensure

的博客

如何使用react-router对lazyload子路由做出反应？

1 个答案: