JavaScript : 웹팩 코드 분할 사용 : 예제, 구현

JavaScript : 웹팩 코드 분할 사용 : 예제, 구현

 

코드 분할이라는 웹팩 기능을 살펴 보겠습니다. 코드 분할을 사용하면 기본 JavaScript 파일을 다른 파일로 분할하여 필요할 때마다 느리게 로드하여 기본 JavaScript 파일의 크기를 줄일 수 있습니다.

JavaScript 파일이 매우 클 수 있으므로 단일 페이지 애플리케이션을 빌드 할 때 매우 중요한 기능입니다. 즉, 페이지를 시작하기 전에 페이지가 다운로드 될 때까지 기다려야합니다.

코드 분할을 사용하면 코드를 여러 파일로 분할하고 앱에서 페이지를 표시하는 데 필요한 파일만 다운로드 할 수 있습니다. 예를 들어 단일 페이지에서 구성 요소만 사용하는 경우 앱의 모든 페이지에서 해당 구성 요소를 로드할 필요가 없습니다. 코드 분할 Webpack을 사용하면 필요할 때만 해당 구성 요소에 로드가 지연 될 수 있습니다.

스크립트에서 동적으로 로드하려면 import의 Javascript 기능을 사용해야 하지만 키워드 import ()는 정적이므로 키워드 import ()입니다. 먼저 동적 가져 오기를 위해 babel 플러그인을 설치해야합니다.

npm install babel-plugin-syntax-dynamic-import --save-dev

 

 

설치되면 프로젝트의 루트에 .babelrc 파일을 추가하고 다음 구성을 추가해야합니다.

 

{
    "presets": [
        "babel-preset-env"
    ],
    "plugins": [
        "babel-plugin-syntax-dynamic-import"
    ]
}

 

 

JavaScript로 파일을 가져오려 './location-of-module.js'에서 import module을 사용하는 것이 매우 간단합니다. import () 구문을 사용하면 가져올 내용에 대한 단일 인수를 허용하므로 모듈 내용을 해결할 수있는 약속을 반환합니다. 예를 들어 Vue 구성 요소를 가져 오려면 다음 구문을 사용합니다.

Vue.component('search', (resolve) => {
    import('./components/Search.vue')
      .then((Search) => {
        resolve(Search.default)
      })
  })

 

 

npm run dev와 같은 것을 사용하여 Javascript를 빌드하면 일반적인 기본 Javascript가 추가되고 새로운 0.js 파일이 생성됩니다.

DONE  Compiled successfully in 871ms

     Asset     Size  Chunks                    Chunk Names
      0.js  75.9.8 kB       0  [emitted]  [big]
/js/app.js   900.7 kB       1  [emitted]         /js/app

 

 

 

Vue Single File Component

Vue 단일 파일 컴포넌트와 함께 이것을 사용하려면 구문이 훨씬 쉽습니다. 컴포넌트를 정의 할 때 import 함수를 사용해야 합니다.

const app = new Vue({
    el: '#app',
    components: {
      Search: () => import('./components/Search.vue'),
    }
});

 

 

 

Using With vue-router

Vue Router를 사용하여 페이지에 표시 할 컴포넌트를 정의하는 단일 페이지 앱이 있는 경우에도 위와 동일한 기술로 코드 분할을 사용할 수 있습니다.

export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: () => import('./components/Home.vue') },
      { path: '/item/:id', component: () => import('./components/Item.vue') }
    ]
  })
}

 

 

Changing The Public Path

코드 분할을 사용하여 찾은 문제 중 하나는 다른 환경에서 JavaScript 파일이 다른 위치에 저장되었다는 것입니다.

이 문제를 해결하려면 공용 폴더의 위치를 webpack에 알려 주면 환경별로 변경할 수 있습니다.

const ASSET_PATH = process.env.ASSET_PATH || '/';
mix.webpackConfig({
  output: {
    publicPath: ASSET_PATH
  }
})

 

 

Prefetch A Module

앱에 지연로드 할 구성 요소가 있는 경우 이 파일을 프리 페치하도록 지시하여 브라우저 처리 속도를 높일 수 있습니다.

예를 들어 Login 모달로 팝업되는 Login 버튼이 있다고 가정해 봅시다. 이 Login 모달은 자체 구성 요소 파일에 있을 수 있으며 abve 기술을 사용하여 코드를 나눌 수 있습니다. 로그인 모달에 대한 동작을 정의하면 로그인 버튼 구성 요소 내에 있고 모달을 가져옵니다.

웹팩 주석 주석을 사용하면 다음 코드를 사용하여 웹팩에 이를 프리 페치하도록 지시 할 수 있습니다.

import(/* webpackPrefetch: true */ "LoginModal");

 

 

그러면 Webpack은 자동으로 <link rel="prefetch" href="login-modal.js">를 페이지 헤드에 추가하여 사용자가 브라우저 로그인 버튼을 클릭하면 필요할 떄 이 스크립트를 프리 페치하도록 지시합니다.