VueJs + Element로부터의 Webpack laze load 모듈UI

VueJs + Element로부터의 Webpack laze load 모듈UI

요소의 특정 요소를 느리게 로드하고 싶다.Vue 구성 요소의 UI입니다.

이거 해봤어요.

import { Tree } from /* webpackChunkName : "element-ui" */ 'element-ui';

Vue.component(Tree.name, Tree);
Vue.use(Tree);

그리고 이것은:

{
  components: {
    'el-tree': () => import(/* webpackChunkName : "element-ui" */ "element-ui").then(({Tree}) => Tree)
  }
}

하지만 두 경우 모두element-ui.js청크 파일이 생성되지 않고 완전한 라이브러리가 에 삽입됩니다.main.js대신 파일을 제출하세요.

요소의 사용된 요소만 동적으로 가져오려면 어떻게 해야 합니까?UI(라이브러리 전체가 아님)

왜?import('element-ui').then(({Tree}) => Tree)요소 전체를 묶다UI 라이브러리?

그element-ui 라이브러리는 공통입니다.JS 모듈. 트리가 webpack-common-shake흔들리지 않습니다(존재하지만 주행거리가 다를 수 있습니다).

요소에서 개별 요소만 가져올 수 있습니까?UI?

요소UI 문서에서는 (Element에서도 작성)를 사용할 것을 권장합니다.UI)를 사용하여 사용된 요소만 가져옵니다.사용방법은 다음과 같이 문서화되어 있습니다.

1. 설치하다babel-plugin-component:

   npm install babel-plugin-component -D
   

2. 편집.babelrc내용:

   {
     "presets": [["es2015", { "modules": false }]],
     "plugins": [
       [
         "component",
         {
           "libraryName": "element-ui",
           "styleLibraryName": "theme-chalk"
         }
       ]
     ]
   }
   

3. 원하는 요소를 정적으로 가져와 Vue 구성 요소로 초기화합니다.

   import { Button } from 'element-ui';
   Vue.component(Button.name, Button);
   

개별 요소를 동적으로 가져올 수 있습니까?

네, 가능합니다.

첫째, 이 방법을 이해하는 것이 편리합니다.babel-plugin-component동작합니다.플러그인은 효과적으로 변환합니다.

import { __ComponentName__ } from 'element-ui';
Vue.component('x-foo', __ComponentName__);

다음과 같이 입력합니다.

import __ComponentName__ from 'element-ui/lib/__component-name__';
import 'element-ui/lib/__styleLibraryName__/__component-name__.css';
Vue.component('x-foo', __ComponentName__);

주의:

• __styleLibraryName__Babel 사전 설정 옵션으로 구성됩니다..babelrc.
• 변환에는 컴포넌트 이름 포맷이 포함됩니다.(__ComponentName__케밥 케이스 ( )__component-name__예를 들어,Button된다button; 및DatePicker된다date-picker.

• 기존 요소를 제거해야 합니다.UI 가져오기: "온 디맨드" 가져오기를 방지합니다.

  // import ElementUI from 'element-ui'; // REMOVE
  // import 'element-ui/lib/theme-chalk/index.css'; // REMOVE
  

따라서 이 지식을 사용하여 다음과 같은 특정 요소를 동적으로 Import할 수 있습니다.

// main.js
import 'element-ui/lib/__styleLibraryName__/__component-name__.css';
Vue.component('x-foo', () => import(/* webpackChunkName: "x-foo" */ 'element-ui/lib/__component-name__'));

또는 다음 중 하나를 선택합니다.

<!-- MyComponent.vue -->
<script>
import 'element-ui/lib/__styleLibraryName__/__component-name__.css';

export default {
  components: {
    'x-foo': () => import(/* webpackChunkName: "x-foo" */ 'element-ui/lib/__component-name__'),
  }
}
</script>

예를 들어 가져오려면Button초크 테마:

<!-- MyComponent.vue -->
<script>
import 'element-ui/lib/theme-chalk/button.css';

export default {
  components: {
    'el-button': () => import(/* webpackChunkName: "element-button" */ 'element-ui/lib/button'),
  }
}
</script>

그러나 이러한 요소는 비교적 작기 때문에 컨테이너 청크에 대한 네트워크 요구의 오버헤드와 요소 청크를 고려하면 느긋하게 로드할 가치가 없을 수 있습니다.반면, 요소가 조건부로 제공되고 그 조건이 거의 참이 되지 않는다면 절감액은 가치가 있을 수 있다.

언급URL : https://stackoverflow.com/questions/52104217/vuejs-webpack-lazyload-modules-from-elementui