vue路由的按需加載

先看require import import()區別

import命令會被 JavaScript 引擎靜態分析，先於模塊內的其餘模塊執行（叫作」鏈接「更合適）。

import()函數，完成動態加載。異步加載

require是運行時加載模塊，只有運行時才知道,同步加載

      在Vue項目中，通常使用vue-cli構建項目後，咱們會在Router文件夾下面的index.js裏面引入相關的路由組件,如：

  import Hello from '@/components/Hello'
   import Boy from '@/components/Boy'
   import Girl from '@/components/Girl'
　　這樣作的結果就是webpack在npm run build的時候會打包成一個整個的js文件，若是頁面一多，會致使這個文件很是大，加載緩慢，爲了解決這個問題，須要將他分紅多個小文件，並且還要實現異步按需加載，即用到了再加載，而不用一股腦所有加載

1.webpack提供的require.ensure(),這樣能夠實現按需加載，而且你能夠將多個相同類的組件打包成一個文件，只要給他們指定相同的chunkName便可，如示例中的demo將會打包成一個文件。

2.Vue的異步組件技術，這種方法能夠實現按需加載，而且一個組件會打包成一個js文件

3.es提案的import（）

首先，能夠將異步組件定義爲返回一個 Promise 的工廠函數 (該函數返回的 Promise 應該 resolve 組件自己)：

第二，在 Webpack 2 中，咱們可使用動態 import語法來定義代碼分塊點 (split point)：

（注意：若是您使用的是 Babel，你將須要添加 syntax-dynamic-import 插件，才能使 Babel 能夠正確地解析語法。）

結合這二者，這就是如何定義一個可以被 Webpack 自動代碼分割的異步組件。

這樣作的結果是每一個組件都會打包成一個js文件，有時候咱們想把某個路由下的全部組件都打包在同個異步塊 (chunk) 中。只須要使用 命名 chunk，一個特殊的註釋語法來提供 chunk name

原文連接：https://blog.csdn.net/juse__we/article/details/84070965