使用 webpack、bundle-loader react-router 进行隐式代码拆分答案

【问题标题】：Implicitly code-splitting with webpack, bundle-loader react-router使用 webpack、bundle-loader react-router 进行隐式代码拆分
【发布时间】：2016-08-14 13:06:09
【问题描述】：

Edit2： 编辑了正则表达式以匹配窗口的文件路径，现在正在发生代码拆分。但是我的根路由的子组件仍然无法加载。

编辑：自上周以来我的代码发生了变化，但我仍然被这个问题所困扰（我需要以声明方式声明我的路线，因此使用 JSX）。

首先，我使用的是带有 React、react-router、bundle-loader、Babel6、ES6 和 airbnb-eslint-config 的 Webpack 1.x。

我尝试关注Henley Edition's article 关于代码拆分和加载块（及其example repo），基于React's huge app example。

但我无法让bundle-loader 将我的代码拆分成块...

这是我的代码：

webpack.config.js

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

const nodeDir = `${__dirname}/node_modules`;

const routeComponentRegex = /src[\/\\]views[\/\\]([^\/\\]+)[\/\\]js[\/\\]([^\/\\]+).js$/;
const paths = [ // Only to test which files match the regex, juste in case
  'src/views/index/js/Index.js',
  'src/views/login-page/js/LoginForm.js',
  'src/common/main-content/js/MainContent.js',
  'src/routes/main.js',
];

console.log(routeComponentRegex.test(paths[0])); // prints 'true'
console.log(routeComponentRegex.test(paths[1])); // prints 'true'
console.log(routeComponentRegex.test(paths[2])); // prints 'false'
console.log(routeComponentRegex.test(paths[3])); // prints 'false'

const config = {
  resolve: {
    alias: {
      react: `${nodeDir}/react`,
      'react-dom': `${nodeDir}/react-dom`,
      'react-router': `${nodeDir}/react-router`,
      'react-fetch': `${nodeDir}/react-fetch`,
      'react-cookie': `${nodeDir}/react-cookie`,
      'react-bootstrap': `${nodeDir}/react-bootstrap`,
      'react-bootstrap-daterangepicker': `${nodeDir}/react-bootstrap-daterangepicker`,
      'react-bootstrap-datetimepicker': `${nodeDir}/react-bootstrap-datetimepicker`,
      velocity: `${nodeDir}/velocity-animate`,
      moment: `${nodeDir}/moment`,
      slimscroll: `${nodeDir}/slimscroll`,
    },
  },
  entry: {
    app: './client/src/routes/js/main',
    vendors: [
      'react', 'react-dom',
      'react-router', 'react-fetch', 'react-cookie',
      'react-bootstrap', 'react-bootstrap-daterangepicker', 'react-bootstrap-datetimepicker',
      'velocity', 'moment', 'slimscroll',
    ],
  },
  output: {
    path: path.join(__dirname, 'public/dist'),
    publicPath: '/dist/',
    filename: 'bundles/[name].bundle.js',
    chunkFilename: 'chunks/[name].chunk.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        exclude: routeComponentRegex,
        loader: 'babel',
      },
      {
        test: /\.css$/,
        include: path.join(__dirname, 'client'),
        exclude: routeComponentRegex,
        loader: 'style!css-loader?modules&importLoaders=1' +
        '&localIdentName=[name]__[local]___[hash:base64:5]',
      },
      {
        test: routeComponentRegex,
        include: path.join(__dirname, 'client'),
        loaders: ['bundle?lazy', 'babel'],
      },
    ],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendors', 'bundles/vendors.js', Infinity),
  ],
};

module.exports = config;

client/src/views/main-content/js/MainContent.js

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

const MainContent = (props) => (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/login">Login</Link></li>
      </ul>
      {props.children}
    </div>
);

MainContent.propTypes = {
  children: React.PropTypes.node.isRequired,
};

export default MainContent;

public/src/views/index/js/Index.js

import React from 'react';

const Index = () => (
    <h2>Index Page</h2>
);

export default Index;

public/src/views/login/js/Login.js

import React from 'react';

const LoginForm = () => (
  <div className="box box-default">
    <h2>Login Page</h2>
  </div>
);

export default LoginForm;

入口点（client/src/routes/main.js）：

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

import MainContent from '../../common/main-content/js/MainContent';

// modules supposed to be loaded lazily
import Index from '../../views/index/js/Index';
import Login from '../../views/login/js/Login';
import ShortOffers from '../../views/short-offers/js/ShortOffers';
import CreateJobOffer from '../../views/create-job-offer/js/CreateJobOffer';

function lazyLoadComponent(lazyModule) {
  return (location, cb) => {
    lazyModule(module => {
      cb(null, module);
    });
  };
}

function lazyLoadComponents(lazyModules) {
  return (location, cb) => {
    const moduleKeys = Object.keys(lazyModules);
    const promises = moduleKeys.map(key =>
      new Promise(resolve => lazyModules[key](resolve))
    );

    Promise.all(promises).then(modules => {
      cb(null, modules.reduce((obj, module, i) => {
        obj[moduleKeys[i]] = module;
        return obj;
      }, {}));
    });
  };
}

render((
  <Router history={browserHistory}>
    <Route path="/" component={MainContent}>
      <IndexRoute getComponent={lazyLoadComponent(Index)} />
      <Route path="short-offers" getComponent={lazyLoadComponent(ShortOffers)} />
      <Route path="create-job-offer" getComponent={lazyLoadComponent(CreateJobOffer)} />
    </Route>
    <Route path="login" getComponent={lazyLoadComponent(Login)} />
  </Router>
), document.getElementById('content'));

现在webpack 的输出：

Hash: a885854f956aa8d2a00c
Version: webpack 1.13.0
Time: 6321ms
                Asset     Size  Chunks             Chunk Names
bundles/app.bundle.js  84.7 kB       0  [emitted]  app
   bundles/vendors.js  2.55 MB       1  [emitted]  vendors
chunk    {0} bundles/app.bundle.js (app) 89 kB {1} [rendered]
    [0] multi app 28 bytes {0} [built]
     + 26 hidden modules
chunk    {1} bundles/vendors.js (vendors) 2.45 MB [rendered]
    [0] multi vendors 148 bytes {1} [built]
     + 626 hidden modules

看，没有捆绑 :( 如果我理解得很好，webpack.config.js 中的第三个加载器应该处理 .js 文件中导入的文件并将它们放入chunks，这样它们就可以加载到dynamically (and lazily)。

此外，我的页面无法加载。如果我从图片中取出代码，它可以工作：

render((
  <Router history={browserHistory}>
    <Route path="/" component={MainContent}>
      <IndexRoute component={Index} />
      <Route path="short-offers" getComponent={ShortOffers} />
      <Route path="create-job-offer" getComponent={CreateJobOffer} />
    </Route>
    <Route path="login" getComponent={LoginPage} />
  </Router>
), document.getElementById('content'));

但是，我的应用程序会很大，我绝对需要代码拆分。

有人可以给我一些见解吗？

提前致谢！

【问题讨论】：

标签： reactjs webpack react-router

【解决方案1】：

文章作者在这里。尝试运行npm start（运行开发服务器）或webpack -c webpack.config.js（将文件输出到__build__ 目录）。我想你只是忘了将 webpack 指向正确的配置文件。

【讨论】：

您好，谢谢，但我只有一个 webpack.config.js 文件...我尝试过，但没有运气。从那时起，我就采用了原始 React 的巨大应用示例的方式，无论如何，谢谢！
你好。我别无选择，只能在我的代码中实现你的方式（这很酷，因为我喜欢 JSX 的声明方式）。我更新了我的代码，你能看看吗？非常感谢！

【解决方案2】：

使用module.exports 而不是export default

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

const MainContent = (props) => (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/login">Login</Link></li>
      </ul>
      {props.children}
    </div>
);

MainContent.propTypes = {
  children: React.PropTypes.node.isRequired,
};

module.exports = MainContent;

或者最好使用babel-plugin-add-module-exports插件它会转换

// index.js 
export default 'foo'

进入

'use strict';
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = 'foo';

【讨论】：