Question

我想将我的反应javascript源代码拆分成小块文件，以便进行动态路由。

为了理解动态路由的工作原理，我从https://github.com/ReactTraining/react-router克隆了react-router源代码。并在示例下运行webpack命令。我可以看到许多文件是在 build 目录下生成的，如下所示：

$ webpack
Hash: 5c9ad6c3ccf9f6bc5fcb
Version: webpack 1.13.3
Time: 4959ms
                               Asset     Size  Chunks             Chunk Names
                         19.chunk.js  1.42 kB      19  [emitted]  
                     active-links.js  9.91 kB       0  [emitted]  active-links
                        auth-flow.js  19.4 kB       2  [emitted]  auth-flow
auth-flow-async-with-query-params.js  10.4 kB       3  [emitted]  auth-flow-async-with-query-params
            auth-with-shared-root.js  21.9 kB       4  [emitted]  auth-with-shared-root
                          5.chunk.js  1.84 kB       5  [emitted]  
                          6.chunk.js  1.39 kB       6  [emitted]  
                          7.chunk.js  5.83 kB       7  [emitted]  
                          8.chunk.js  1.52 kB       8  [emitted]  
                          9.chunk.js  2.39 kB       9  [emitted]  
                         10.chunk.js  2.35 kB      10  [emitted]  
                         11.chunk.js  1.42 kB      11  [emitted]  
                         12.chunk.js  1.44 kB      12  [emitted]  
                      breadcrumbs.js  37.3 kB      13  [emitted]  breadcrumbs
            confirming-navigation.js  9.29 kB      14  [emitted]  confirming-navigation
                 dynamic-segments.js  7.25 kB      15  [emitted]  dynamic-segments
                        huge-apps.js  33.7 kB      16  [emitted]  huge-apps
                         17.chunk.js  3.56 kB      17  [emitted]  
                         18.chunk.js  5.21 kB      18  [emitted]  
                       animations.js   222 kB       1  [emitted]  animations
                         20.chunk.js  3.95 kB      20  [emitted]  
                         21.chunk.js  7.59 kB      21  [emitted]

从上面的输出中，您可以看到生成了许多块文件。在examples / webpack.config.js文件中，我可以看到以下配置：

output: {
    path: __dirname + '/__build__',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js',
    publicPath: '/__build__/'
  },

这是配置块文件的唯一地方吗？拆分这些块文件的逻辑是什么？当我更改路由器时，服务器如何知道需要下载哪个块文件？

Answer 1

当我更改路由器时，服务器如何知道哪个块文件需要下载吗？

不完全确定特定的chunk文件，但Webpack将所有js文件编译成一个文件。 index.html（在同一文件夹中）是呈现React组件的位置，并且还引用了该文件（bundle.js）。

从服务器的角度来看，当您访问自己的网站时，根据您的路线设置方式，您始终会被发送到您的网站/＆＃39; route，然后通过react-router利用客户端路由。

我发现这些资源对于了解react-router / client与服务器端路由非常有帮助。希望这有用。

https://github.com/reactjs/react-router-tutorial React-router urls don't work when refreshing or writting manually

如何理解webpack chunk如何生成chunk js文件以进行动态路由反应？

1 个答案: