使用 Webpack 进行代码拆分答案

【问题标题】：Code splitting with Webpack使用 Webpack 进行代码拆分
【发布时间】：2016-09-27 21:16:52
【问题描述】：

对于我的一条路线，我当前的路线描述如下：

<Route path='auth' component = {AuthenticateContainer} onEnter = {checkAuth}/>

为了分割路由路径的代码，我相信代码可能如下所示：

                <Route path="auth"  getComponent={(nextState, callback) => {
                    require.ensure([], function(require) {
                        callback(null, require('./AuthenticateContainer.js').default);
                    })
                }}/>

但我缺少的是 OnEnter checkAuth 函数，我该如何包含它？

【问题讨论】：

标签： reactjs webpack react-router code-splitting

【解决方案1】：

如果您在 ./AuthenticationContainer.js 中有 checkAuth，则将其移动到 routes.js 或创建一个新的 js 文件并在 routes.js 中使用它。基本上，在需要使用getComponent 的组件之前，必须存在要在onEnter 钩子上运行的函数。

我的 routes.js 看起来像这样-

import React from 'react';
import { Route } from 'react-router';

export default (store) => {
  function requireAuth(nextState, replace) {
    if(!store.getState().auth.isAuthenticated) {
      replace({
        pathname: '/',
        state: { nextPathname: nextState.location.pathname }
      })
    }
  }

  return { childRoutes: [{
      path: '/',
      getComponents(location, callback) {
        require.ensure(['./containers/App/App.jsx'], function (require) {
            callback(null, require('./containers/App/App.jsx').default)
        })
      },
      childRoutes: [{
        path: 'about',
        onEnter: requireAuth,
        getComponents(location, callback) {
          require.ensure(['./containers/About/About.jsx'], function (require) {
              callback(null, require('./containers/About/About.jsx').default)
          })
        }
      }]
    }]
  }
};

我不确定您是否可以在 require.ensure 内调用 checkAuth 并在组件未通过身份验证时停止加载该组件。按照设计，这是一种不好的方法，因为您正在加载组件然后检查它是否经过身份验证。这否定了代码拆分的好处。

编辑 - 添加 webpack.config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');

var config = {
  entry: APP_DIR + '/index.jsx',

  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    chunkFilename: '[id].chunk.js',
  },

  devtool: 'inline-source-map',

  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      },
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: __dirname
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('shared.js')
  ]
};

module.exports = config;

Webpack 构建输出 -

webpack -d --watch

Hash: 08b101d1e95f7633adb4
Version: webpack 1.13.2
Time: 2680ms
         Asset     Size  Chunks             Chunk Names
     bundle.js  1.05 MB    0, 3  [emitted]  main
    1.chunk.js  4.15 kB    1, 3  [emitted]  
    2.chunk.js  3.19 kB    2, 3  [emitted]  
     shared.js  3.66 kB       3  [emitted]  shared.js
 bundle.js.map  1.16 MB    0, 3  [emitted]  main
1.chunk.js.map  2.32 kB    1, 3  [emitted]  
2.chunk.js.map  1.18 kB    2, 3  [emitted]  
 shared.js.map  3.67 kB       3  [emitted]  shared.js
    + 269 hidden modules

【讨论】：

Arjun ，这是否意味着无论何时用户访问“关于”路径，About.jsx 的代码拆分都不会受益太多，因为 requireAuth 仍然驻留在主块 JS 文件中并且是必需的每次。
另外，我需要修改我的 webpack 配置吗？因为添加 require 后的事件。确保 webpack -p 没有创建任何额外的 js 文件
@jasan - 您可以将登录/注册表单和相关功能保留在 AuthenticationContainer.js 中，并将 checkAuth 保留在主块中，因为您将始终运行 checkAuth 以查看用户在移动到之前是否已登录新路线。我将 checkAuth 视为整个应用程序所需的辅助实用程序，而不仅仅是一个或两个容器。注意 - 您仍在拆分代码。 AuthenticationContainer 只会在用户未登录时运行。如果用户需要始终登录到应用程序，那么将 AuthenticationContainer 拆分为一个块是没有意义的，因为它总是需要的。
谢谢，这是有道理的。然而出于某种原因，即使有了这些定义的分割点，webpack 也只会生成一个捆绑文件。