require vs import

두 키워드 모두 외부 라이브러리를 불러오는 코드

require

require는 NodeJS에서 사용되고 있는 CommonJS 키워드

const moment = require('moment')

import

import는 ES6에서 새롭게 도입된 키워드

import moment from 'moment'

차이점

웹팩에서 Import와 Require을 사용시 발생하는 차이점

아래처럼 file1.js를 불러왔을때, 특정 실제로 사용할 a값을 가져올 수 있으며 나머지값들은 웹팩의 웹팩의 tree shaking으로 인해 빌드에서 제거된다. 즉, 불필요한 파일을 제거함으로 코드량을 줄일 뿐만 아니라, 성능적으로도 좋다.

// file1.js
export {
	a : 'a',
	b : 'b',
	c : 'c'
};

// file2.js
import { a } from './file1';
console.log(a);

하지만 require을 사용하면 동적으로 모듈을 불러올 수 있지만, 불필요한 코드들까지 불러오기 때문에 실제로 어떤 코드가 사용되었는지 명확히 알 수 없다.

import React from 'react';  
import ReactDOM from 'react-dom';  
import ReloadRoot from './components/ReloadRoot';  

const render = () => {  
  ReactDOM.render(  
    <ReloadRoot />,  
    document.getElementById('root')  
  );  
} 

render();

if (module.hot) {  
  module.hot.accept('./components/ReloadRoot', () => {  
    require('./components/ReloadRoot').default;  
    render();  
  });  
}

그렇기 때문에, ES2015에서 이 문제를 해결하기 위해 import를 사용한다. babel-loader에서는 웹팩의 tree shaking 기능을 유지하기 위해 설정시 modules : false로 하면 된다.

출처

• Webpack(웹팩) Import vs Require 차이점은 무엇일까?