Vue.js - Dynamic & Async Components

Async Components 可讓Vue.js建立大型應用:
https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

推薦async components可和Webpack’s code-splitting feature搭配使用:
    - 先了解Webpack’s code-splitting feature:
       - lodash:https://jigsawye.com/2017/09/04/make-good-use-of-lodash/
       https://webpack.js.org/guides/code-splitting/
       - 3個方法中,應選Dynamic Imports,達成動態載入某元件目的。
       -  * prefetch: resource is probably needed for some navigation in the future
          * preload: resource might be needed during the current navigation
           Simple prefetch example can be having a HomePage component, which renders a LoginButtoncomponent which then on demand loads a LoginModal component after being clicked.
           Simple preload example can be having a Component which always depends on a big library that should be in a separate chunk.
           Using webpackPreload incorrectly can actually hurt performance, so be careful when using it.

    - Vue.js和webpack code splitting應用的例子:
        - Code splitting is the idea that a bundle can be fragmented into smaller files allowing the user to only download what code they need, when they need it.
        - https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/
 
     - 使用Browserify的開發者不適用async loading,但有解法:https://github.com/vuejs/vuejs.org/issues/620




留言

熱門文章