Webpack的Code Splitting實現按需加載

一. 什麼是Code Splitting?

在最開始使用Webpack的時候, 都是將全部的js文件所有打包到一個build.js文件中(文件名取決與在webpack.config.js文件中output.filename), 可是在大型項目中, build.js可能過大, 致使頁面加載時間過長. 這個時候就須要code splitting, code splitting就是將文件分割成塊(chunk), 咱們能夠定義一些分割點(split point), 根據這些分割點對文件進行分塊, 並實現按需加載.

二. Code Splitting的做用?

1. 第三方類庫單獨打包:
   因爲第三方類庫的內容基本不會改變, 能夠將其與業務代碼分離出來, 這樣就能夠最大化的利用瀏覽器的緩存機制, 減小請求.
2. 按需加載:
   Webpack支持定義分割點, 經過require.ensure進行按需加載.

三. 如何進行Code Splitting?

下面的代碼是基於vue-cli的webpack-simple模板生成的演示文檔

//cmd
vue init webpack-simple code_spliting_demo
複製代碼

(一) 第三方類庫單獨打包

咱們假設項目中引入了jquery.js和respond.js, 那麼咱們能夠在webpack.config.js中配置多入口來進行將這兩個第三方類庫單獨打包.

• 在webpack.config.js進行配置

  //webpack.config.js
  
  //在entry中添加相應第三方類庫
  entry: {
      bundle: './src/main.js',
      vendor: ['./src/lib/jquery-1.10.2.min.js', './src/lib/respond.min.js']
  }
    
   //在plugins中添加CommonChunkPlugin
  plugins:[
      new webpack.optimize.CommonsChunkPlugin({ 
          name: 'vendor',  
          filename: 'vendor.bundle.js'  
      })
  ]
  複製代碼

• 執行npm run build, 此時dist目錄下生成了兩個文件, 分別是build.js和vendor.bundle.js

  

  npm run build後的生成文件

• 在index.html中引入, 注意: vendor.bundle.js優先於build.js引入

  //index.html
  
  <script src="/dist/vendor.bundle.js"></script>
  <script src="/dist/build.js"></script>
  複製代碼

(二) 按需加載

咱們能夠在router中進行配置, 實現組件的按需加載, 在一些單個組件文件較大的時候, 採用按需加載可以減小build.js的體積, 優化加載速度(若是組件的體積較小, 那麼採用按需加載會增長額外的http請求, 反倒增長了加載時間)

• 這裏, 咱們增長3個組件,分別是A.vue, B.vue, C.vue

  //A.vue
  <template>
      <h1>這裏是A.vue組件</h1>
  </template>
  
  //B.vue
  <template>
      <h1>這裏是B.vue組件</h1>
  </template>
  
  //C.vue
  <template>
      <h1>這裏是C.vue組件</h1>
  </template>
  複製代碼

• 在路由中進行配置　(注意:這裏是爲了方便, 是在app.js中添加的路由, 在實際的項目中, 路由應該單獨抽取出來)

  //app.js
  
  import Vue from 'vue'
  import App from './App.vue'
  import VueRouter from 'vue-router'
  Vue.use(VueRouter)
  
  //AMD規範的異步載入
  const ComA = resolve => require(['./components/A.vue' ], resolve);
  const ComB = resolve => require(['./components/B.vue' ], resolve);
  const ComC = resolve => require(['./components/C.vue' ], resolve);
  
  const router = new VueRouter({
    routes: [
      {
        name: 'component-A',
        path: '/a',
        component: ComA
      },
      {
        name: 'component-B',
        path: '/b',
        component: ComB
      },
      {
        name: 'component-C',
        path: '/c',
        component: ComC
      }
    ]
  })
  
  new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
  })
  複製代碼

• 在webpack.config.js中進行配置output.chunkFilename,

//webpack.config.js

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js',
    //添加chundkFilename
    chunkFilename: '[name].[chunkhash:5].chunk.js'
}
複製代碼

• 執行npm run build, 此時dist目錄下生成了5個文件, 多出的3個文件,就是對應的A.vue, B.vue, C.vue這三個組件

  

  npm run build後生成的文件

CMD規範的異步載入

剛纔在路由引入的時候, 使用的是AMD規範的異步載入. webpack提供了require.ensure()這個方法實現CMD規範的異步載入. 這一樣也是webpack推薦的載入方式.想深刻了解ensure, 請點擊《webpack代碼分離 ensure 看了還不懂，你打我》

• 下面的代碼是使用require.ensure()方法對路由進行配置

//app.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//AMD風格的異步加載
// const ComA = resolve => require(['./components/A.vue' ], resolve);
// const ComB = resolve => require(['./components/B.vue' ], resolve);
// const ComC = resolve => require(['./components/C.vue' ], resolve);

//CMD風格的異步加載
const ComA = resolve => require.ensure([], () => resolve(require('./components/A.vue')));
const ComB = resolve => require.ensure([], () => resolve(require('./components/B.vue')));
const ComC = resolve => require.ensure([], () => resolve(require('./components/C.vue')));

const router = new VueRouter({
  routes: [
    {
      name: 'component-A',
      path: '/a',
      component: ComA
    },
    {
      name: 'component-B',
      path: '/b',
      component: ComB
    },
    {
      name: 'component-C',
      path: '/c',
      component: ComC
    }
  ]
})

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})
複製代碼

• 執行npm run build後, dist目錄下一樣生成5個文件
  
  

  npm run build後生成的文件

• 按需加載效果演示:
  
  

  按需加載效果演示

Lee_tanghui  發佈在 https://www.jianshu.com/p/b3b8fb8a2336