React-Router4에서 코드 분할 방법(웹팩 기반)

이 글에서는 주로 React-Router4(webpack 기반)에서 코드 분할하는 방법을 소개하고 있으니 참고용으로 올려보겠습니다.

머리말

프런트엔드 프로젝트가 계속 확장되면서 원래 단순한 웹 애플리케이션에서 참조하는 js 파일이 점점 더 커질 수 있습니다. 특히 최근 인기가 높은 단일 페이지 애플리케이션에서는 일부 패키징 도구(예: webpack)에 대한 의존도가 증가하고 있습니다. 이러한 패키징 도구를 통해 서로 의존하고 처리해야 하는 모듈을 별도의 번들 파일로 직접 패키징하여, 페이지가 처음 로드될 때 로드됩니다. 그러면 모든 js가 로드됩니다. 그러나 단일 페이지 애플리케이션의 모든 종속성을 한 번에 다운로드할 필요가 없는 시나리오가 종종 있습니다. 예를 들어, 이제 권한이 있는 단일 페이지 "주문 관리" 단일 페이지 애플리케이션이 있습니다. 일반 관리자는 "주문 관리" 섹션에 들어갈 수 있지만 슈퍼 사용자는 "시스템 관리"를 수행할 수 있습니다. 관리 페이지 애플리케이션의 경우, 사용자가 페이지를 처음 열 때 관련 없는 리소스를 로드하기 위해 오랜 시간을 기다려야 합니다. 이 경우 특정 코드 분할 수행을 고려할 수 있습니다.

구현 방법

간단한 온디맨드 로딩

코드 분할의 핵심 목적은 온디맨드 리소스 로딩을 달성하는 것입니다. 이 시나리오를 고려해 보세요. 웹사이트 오른쪽 하단에 채팅 상자와 유사한 구성 요소가 있습니다. 원형 버튼을 클릭하면 채팅 구성 요소가 페이지에 표시됩니다.

btn.addEventListener('click', function(e) {
  // 在这里加载chat组件相关资源 chat.js
});

이 예에서 chat.js를 로드하는 작업을 btn 클릭 이벤트에 바인딩하면 채팅 버튼을 클릭한 후 채팅 구성 요소의 온디맨드 로드가 달성될 수 있음을 알 수 있습니다. js 리소스를 동적으로 로드하는 방법도 매우 간단합니다(익숙한 jsonp와 유사). 페이지에 태그를 동적으로 추가하고 src 속성을 리소스에 지정하면 됩니다.

btn.addEventListener('click', function(e) {
  // 在这里加载chat组件相关资源 chat.js
  var ele = document.createElement('script');
  ele.setAttribute('src','/static/chat.js');
  document.getElementsByTagName('head')[0].appendChild(ele);
});

코드 분할은 주문형 로딩을 달성하기 위해 수행하는 작업입니다. 패키징 도구를 사용하여 모든 js를 Bundle.js 파일로 패키징한다고 상상해 보세요. 이 경우 위에서 설명한 온디맨드 로딩을 ​​달성할 수 있는 방법이 없습니다. 따라서 우리는 온디맨드 로딩 코드에 대해 이야기해야 합니다. 코드 분할인 패키징 프로세스 중에 분할합니다. 그렇다면 이러한 리소스를 수동으로 분할해야 합니까? 물론 그렇지 않습니다. 여전히 패키징 도구를 사용해야 합니다. 다음으로 webpack의 코드 분할을 소개하겠습니다.

코드 분할

여기에서는 응용 시나리오로 돌아가 웹팩에서 코드 분할을 수행하는 방법을 소개합니다. Webpack의 빌드에서 코드 분할을 구현하는 방법에는 여러 가지가 있습니다.

import()

여기서 import는 모듈이 도입될 때의 import와는 다릅니다. 동적으로 로드되는 모듈의 함수와 유사한 것으로 이해될 수 있으며, 전달되는 매개변수는 해당 모듈입니다. 예를 들어, 'react'의 원래 모듈 import React는 import('react')로 작성할 수 있습니다. 그러나 import()는 Promise 객체를 반환한다는 점에 유의해야 합니다. 따라서 다음과 같은 방법으로 사용할 수 있습니다.

btn.addEventListener('click', e => {
  // 在这里加载chat组件相关资源 chat.js
  import('/components/chart').then(mod => {
    someOperate(mod);
  });
});

보시다시피 사용 방법은 매우 간단하며 우리가 일반적으로 사용하는 Promise와 다르지 않습니다. 물론 몇 가지 예외 처리를 추가할 수도 있습니다.

btn.addEventListener('click', e => {
  import('/components/chart').then(mod => {
    someOperate(mod);
  }).catch(err ＝> {
    console.log('failed');
  });
});

물론 import()는 Promise 객체를 반환하므로 몇 가지 호환성 문제에 주의해야 합니다. 이 문제를 해결하는 것은 어렵지 않습니다. 일부 Promise 폴리필을 사용하면 호환성을 얻을 수 있습니다. 동적 import() 메서드는 의미와 구문 측면에서 비교적 명확하고 간결하다는 것을 알 수 있습니다.

require.ensure()

webpack 2의 공식 웹사이트에 다음 문장을 작성했습니다.

require.ensure()는 webpack에만 해당되며 import()로 대체됩니다.

따라서 webpack 2에서는 다음과 같아야 합니다. require.ensure() 메소드를 사용하는 것은 권장되지 않습니다. 하지만 이 방법은 현재에도 여전히 유효하므로 간단히 소개하겠습니다. webpack 1에 포함된 경우에도 사용할 수 있습니다. 다음은 require.ensure()의 구문입니다.

require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)

require.ensure()는 세 가지 매개변수를 허용합니다:

1. 첫 번째 매개변수 종속성은 현재 필요한 모듈의 일부 종속성을 나타내는 배열입니다. 두 번째 매개변수 콜백은 콜백 함수입니다. 주목해야 할 점은 이 콜백 함수에는 require 매개변수가 있으며 이를 통해 콜백 함수 내에서 다른 모듈을 동적으로 도입할 수 있다는 것입니다. 이 require는 콜백 함수의 매개변수이지만 이론상으로는 다른 이름으로 변경할 수 있지만 실제로는 변경할 수 없습니다. 그렇지 않으면 webpack이 정적 분석 중에 이를 처리할 수 없습니다.

   세 번째 매개변수 errorCallback 비교 이해하기 쉽습니다. 오류 처리를 위한 콜백입니다.

2. 네 번째 매개변수인 ChunkName은 패키징을 지정하는 청크 이름입니다.

3. 따라서 require.ensure()의 구체적인 사용법은 다음과 같습니다.

btn.addEventListener('click', e => {
  require.ensure([], require => {
    let chat = require('/components/chart');
    someOperate(chat);
  }, error => {
    console.log('failed');
  }, 'mychat');
});

4. Bundle Loader

위의 두 가지 방법을 사용하는 것 외에도 webpack의 일부 구성 요소를 사용할 수도 있습니다. 예를 들어, 번들 로더를 사용하는 경우:

npm i --save bundle-loader

require("bundle-loader!./file.js")를 사용하여 해당 청크를 로드합니다. 이 메소드는 콜백 함수를 매개변수로 받아들이는 함수를 반환합니다.

let chatChunk = require("bundle-loader?lazy!./components/chat");
chatChunk(function(file) {
  someOperate(file);
});

和其他loader类似，Bundle Loader也需要在webpack的配置文件中进行相应配置。Bundle-Loader的代码也很简短，如果阅读一下可以发现，其实际上也是使用require.ensure()来实现的，通过给Bundle-Loader返回的函数中传入相应的模块处理回调函数即可在require.ensure()的中处理，代码最后也列出了相应的输出格式：

/*
Output format:
  var cbs = [],
    data;
  module.exports = function(cb) {
    if(cbs) cbs.push(cb);
      else cb(data);
  }
  require.ensure([], function(require) {
    data = require("xxx");
    var callbacks = cbs;
    cbs = null;
    for(var i = 0, l = callbacks.length; i < l; i++) {
      callbacks[i](data);
    }
  });
*/

react-router v4 中的代码拆分

最后，回到实际的工作中，基于webpack，在react-router4中实现代码拆分。react-router 4相较于react-router 3有了较大的变动。其中，在代码拆分方面，react-router 4的使用方式也与react-router 3有了较大的差别。

在react-router 3中，可以使用Route组件中getComponent这个API来进行代码拆分。getComponent是异步的，只有在路由匹配时才会调用。但是，在react-router 4中并没有找到这个API，那么如何来进行代码拆分呢？

在react-router 4官网上有一个代码拆分的例子。其中，应用了Bundle Loader来进行按需加载与动态引入

import loadSomething from 'bundle-loader?lazy!./Something'

然而，在项目中使用类似的方式后，出现了这样的警告：

Unexpected '!' in 'bundle-loader?lazy!./component/chat'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax
Search for the keywords to learn more about each error.

在webpack 2中已经不能使用import这样的方式来引入loader了（no-webpack-loader-syntax）

Webpack allows specifying the loaders to use in the import source string using a special syntax like this:

var moduleWithOneLoader = require("my-loader!./my-awesome-module");

This syntax is non-standard, so it couples the code to Webpack. The recommended way to specify Webpack loader configuration is in a Webpack configuration file.

我的应用使用了create-react-app作为脚手架，屏蔽了webpack的一些配置。当然，也可以通过运行npm run eject使其暴露webpack等配置文件。然而，是否可以用其他方法呢？当然。

这里就可以使用之前说到的两种方式来处理：import()或require.ensure()。

和官方实例类似，我们首先需要一个异步加载的包装组件Bundle。Bundle的主要功能就是接收一个组件异步加载的方法，并返回相应的react组件：

export default class Bundle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mod: null
    };
  }

  componentWillMount() {
    this.load(this.props)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps)
    }
  }

  load(props) {
    this.setState({
      mod: null
    });
    props.load((mod) => {
      this.setState({
        mod: mod.default ? mod.default : mod
      });
    });
  }

  render() {
    return this.state.mod ? this.props.children(this.state.mod) : null;
  }
}

在原有的例子中，通过Bundle Loader来引入模块：

import loadSomething from 'bundle-loader?lazy!./About'

const About = (props) => (
  <Bundle load={loadAbout}>
    {(About) => <About {...props}/>}
  </Bundle>
)

由于不再使用Bundle Loader，我们可以使用import()对该段代码进行改写：

const Chat = (props) => (
  <Bundle load={() => import(&#39;./component/chat&#39;)}>
    {(Chat) => <Chat {...props}/>}
  </Bundle>
);

需要注意的是，由于import()会返回一个Promise对象，因此Bundle组件中的代码也需要相应进行调整

export default class Bundle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mod: null
    };
  }

  componentWillMount() {
    this.load(this.props)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps)
    }
  }

  load(props) {
    this.setState({
      mod: null
    });
    //注意这里，使用Promise对象; mod.default导出默认
    props.load().then((mod) => {
      this.setState({
        mod: mod.default ? mod.default : mod
      });
    });
  }

  render() {
    return this.state.mod ? this.props.children(this.state.mod) : null;
  }
}

路由部分没有变化

<Route path="/chat" component={Chat}/>

这时候，执行npm run start，可以看到在载入最初的页面时加载的资源如下

而当点击触发到/chat路径时，可以看到

动态加载了2.chunk.js这个js文件，如果打开这个文件查看，就可以发现这个就是我们刚才动态import()进来的模块。

当然，除了使用import()仍然可以使用require.ensure()来进行模块的异步加载。相关示例代码如下：

const Chat = (props) => (
  <Bundle load={(cb) => {
    require.ensure([], require => {
      cb(require(&#39;./component/chat&#39;));
    });
  }}>
  {(Chat) => <Chat {...props}/>}
 </Bundle>
);

export default class Bundle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mod: null
    };
  }

  load = props => {
    this.setState({
      mod: null
    });
    props.load(mod => {
      this.setState({
        mod: mod ? mod : null
      });
    });
  }

  componentWillMount() {
    this.load(this.props);
  }

  render() {
    return this.state.mod ? this.props.children(this.state.mod) : null
  }
}

此外，如果是直接使用webpack config的话，也可以进行如下配置

output: {
  // The build folder.
  path: paths.appBuild,
  // There will be one main bundle, and one file per asynchronous chunk.
  filename: 'static/js/[name].[chunkhash:8].js',
  chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 },

结束

代码拆分在单页应用中非常常见，对于提高单页应用的性能与体验具有一定的帮助。我们通过将第一次访问应用时，并不需要的模块拆分出来，通过scipt标签动态加载的原理，可以实现有效的代码拆分。在实际项目中，使用webpack中的import()、require.ensure()或者一些loader（例如Bundle Loader）来做代码拆分与组件按需加载。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

如何在JS中实现字符串拼接的功能（扩展String.prototype.format）

利用ES6通过WeakMap解决内存泄漏问题（详细教程）

如何通过JavaScript实现微信号随机切换代码（详细教程）

위 내용은 React-Router4에서 코드 분할 방법(웹팩 기반)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!