webpack性能優化(1):分隔/分包/非同步載入+組件與路由懶載入

定義如果希望動態給某個類添加一些屬性或者方法，但是你又不希望這個類派生的對象受到影響，那麼裝飾器模式就可以給你帶來這樣的體驗。它的定義就是在不改變原對象的基礎上，通過對其進行包裝拓展，使得原有對象可以動態具有更多功能，從而滿足用戶的更複雜需求。舉個例子，一部手機，你可以買各種花里胡哨的手機殼等 ...

webpack ensure相信大家都聽過。有人稱它為非同步載入，也有人說做代碼切割，那這個家伙到底是用來幹嘛的？其實說白了，它就是把js模塊給獨立導出一個.js文件的，然後使用這個模塊的時候，webpack會構造script dom元素，由瀏覽器發起非同步請求這個js文件。

這樣解決整個項目打包成同一個非常大js、css，首屏載入慢。其實和我們載入百度統計代碼類似，把一些js模塊給獨立出一個個js文件，然後需要用到的時候，在創建一個script對象，加入到document.head對象中即可，瀏覽器會自動幫我們發起請求，去請求這個js文件，在寫個回調，去定義得到這個js文件後，需要做什麼業務邏輯操作。

什麼是懶載入

懶載入也叫延遲載入，即在需要的時候進行載入，隨用隨載。

當頁面中一個文件過大並且還不一定用到的時候，我們希望在使用到的時才開始載入，這就是按需載入。要實現按需載入，我們一般想到的方法：動態創建script標簽，並將src屬性指向對應的文件路徑。

為什麼需要懶載入

在單頁應用中，如果沒有應用懶載入，運用webpack打包後的文件將會異常的大，造成進入首頁時，需要載入的內容過多，延時過長，不利於用戶體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入時間。

實現過程中存在的問題：

怎麼保證相同的文件只載入一次？
怎麼判斷文件載入完成？
文件載入完成後，怎麼通知所有引入文件的地方？

webpcak 的按需載入已經完美解決了上述問題，但如何與webpack配合實現組件懶載入？

如何與webpack配合實現組件懶載入

webpack chunk 流

webpack配置文件中的output路徑配置chunkFilename屬性

output: {
    path: resolve(__dirname, 'dist'),
    filename:  '[name].js?[chunkhash]',
    chunkFilename: '[name].js?[hash:5]',
    publicPath: '/assets/'
},

chunkFilename路徑將會作為組件懶載入的路徑

webpack支持的非同步載入方法

System.import()；

已廢除，不推薦——webpack2官網上已經聲明將逐漸廢除

() => system.import(URL)

() => import(URL)

需要webpack > 2.4，v1不支持——webpack2官網推薦使，官方文檔webpack中使用import(), 屬於es7範疇,

require是由webpack社區提供方案，import為es官方提供；

如果遇到使用import 報錯，需要安裝babelrc，需要配合babel的syntax-dynamic-import插件使用, 具體使用方法如下

npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015

webpack babel-loader 需要配置

use: [{
  loader: 'babel-loader',
  options: {
    presets: [['es2015', {modules: false}]],
    plugins: ['syntax-dynamic-import']
  }
}]

使用如下

//導入整個模塊
import('./component').then(Component => /* ... */); 
//使用await
async function determineDate() {
  const moment = await import('moment');
  return moment().format('LLLL');
}
determineDate().then(str => console.log(str));

vue-router配置路由：vue官方文檔：路由懶載入(使用import())

{
  path: '/',
  component: () => import('../pages/home.vue'),
  meta: {
    title: 'home'
  }}

require.ensure

require.ensure([…modules],()=>{}[,errorCallBack[,chunkName]]);

v1和v2均可使用

require.ensure([], function() {
    var module = require('../../jsLib/module');
    //do something
})

require方式可以將多個模塊js組合分割打包，

require下麵方法ensure第一個參數是依賴，如果不需要請寫[]（空數組）

而import只能將每個模塊獨立打包成一個js文件；

也就是說，如果現在有三個導航A、B、C，你現在用require可以將A單獨分割出來做懶載入，進入a模塊只請求A，B和C你可以組合在一起進行分割，進入B和C將載入共同一個文件；

component: resolve => require(['../pages/home.vue'], resolve)

vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需載入。

{
  // 進行路由配置,規定'/'引入到home組件
  path: '/',
  component: resolve => require(['../pages/home.vue'], resolve),
  meta: {
    title: 'home'
}}

這是非同步載入組件，當你訪問 / ，才會載入 home.vue。

對於vue的路由配置文件(routers.js)

用import引入的話，當項目打包時路由里的所有component都會打包在一個js中，造成進入首頁時，需要載入的內容過多，時間相對比較長。
當用require這種方式引入的時候，會將你的component分別打包成不同的js，載入的時候也是按需載入，只用訪問這個路由網址時才會載入這個js。

你可以打包的時候看看目錄結構就明白了。

require: 運行時調用，理論上可以運用在代碼的任何地方，
import：編譯時調用，必須放在文件開頭

router中實現懶載入

vue的單頁面（SPA）項目,必然涉及路由按需的問題

路由中配置非同步組件

export default new Router({
    routes: [
        {
            mode: 'history',
            path: '/my',
            name: 'my',
            component:  resolve =>require(['../page/my/my.vue'], resolve),//懶載入
        },
    ]
})

實例中配置非同步組件

components: {
  historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶載入
  //historyTab: () => import('../../component/historyTab/historyTab.vue')
},

全局註冊非同步組件

Vue.component('mideaHeader', () => {
    System.import('./component/header/header.vue')
})

關於webpack非同步載入的問題

多次進出同一個非同步載入頁面是否會造成多次載入組件？在多個地方使用同一個非同步組件時是否造成多次載入組件？

否，首次需要用到組件時瀏覽器會發送請求載入組件，載入完將會緩存起來，以供之後再次用到該組件時調用
如果在兩個非同步載入的頁面中分別同步與非同步載入同一個組件時是否會造成資源重用？

會, 將會造成資源重用, 根據打包後輸出的結果來看, a頁面中會嵌入historyTab組件的代碼, b頁面中的historyTab組件還是採用非同步載入的方式, 另外打包chunk；在協同開發的時候全部人都使用非同步載入組件
在非同步載入頁面中載嵌入非同步載入的組件時對頁面是否會有渲染延時影響？

會， 非同步載入的組件將會比頁面中其他元素滯後出現，頁面會有瞬間閃跳影響；因為在首次載入組件的時候會有載入時間，出現頁面滯後，所以需要合理的進行頁面結構設計，避免首次出現跳閃現象；