In the beginning, Webpack all js files into a build.js file (filename depends on output.filename in webpack.config.js), but in large projects, build.js may be too large. The page takes a long time to load. Code splitting is to split files into chunks. We can define some split points according to which files can be divided into chunks and loaded on demand.

Ii. The role of Code Splitting?

1. Third party libraries packaged separately: Since the contents of third party libraries are largely unchanged, they can be separated from the business code to maximize the browser’s caching mechanism and reduce requests.
2. Load on demand:
   
   Webpack supports defining split points throughrequire.ensureLoad on demand.

Iii. How to do Code Splitting?

The following code is a demo document generated based on the VuE-CLI webpack-Simple template

//cmd
vue init webpack-simple code_spliting_demo
Copy the code

(I) The third party class library is packaged separately

Assuming that jquery.js and respond.js are introduced in the project, we can configure multiple portals in webpack.config.js to package these two third-party libraries separately.

• Do the configuration in webpack.config.js

  //webpack.config.js
  
  // Add the corresponding third-party libraries to Entry
  entry: {
      bundle: './src/main.js'.vendor: ['the. / SRC/lib/jquery - 1.10.2. Min. Js'.'./src/lib/respond.min.js']}// Add CommonChunkPlugin to plugins
  plugins:[
      new webpack.optimize.CommonsChunkPlugin({ 
          name: 'vendor'.filename: 'vendor.bundle.js'})]Copy the code

• The dist directory generates two files, build.js and vendor.bundle.js

  

  NPM run build generated file

• In index.html, note that vendor.bundle.js takes precedence over build.js

  //index.html
  
  <script src="/dist/vendor.bundle.js"></script>
  <script src="/dist/build.js"></script>
  Copy the code

(2) load on demand

We can configure the router to implement on-demand loading of components. When some individual component files are large, on-demand loading can reduce the volume of build.js and optimize the loading speed. (If the volume of components is small, on-demand loading will increase additional HTTP requests, but increase the loading time.)

• Here, we add three components, namely A.vue, B.vue and C.vue

  // a. vue <template> <h1> here is the A.vue component </ H1 > </template> // b.vue <template> <h1> Here is the C.ue component </h1> </template>Copy the code

• Configure the route in the route (note: for convenience, the route is added in app.js, in a real project, the route should be extracted separately)

  //app.js
  
  import Vue from 'vue'
  import App from './App.vue'
  import VueRouter from 'vue-router'
  Vue.use(VueRouter)
  
  // Asynchronous loading of AMD specification
  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)
  })
  Copy the code

• Configure output.chunkfilename in webpack.config.js,

//webpack.config.js

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/'.filename: 'build.js'./ / add chundkFilename
    chunkFilename: '[name].[chunkhash:5].chunk.js'
}
Copy the code

• Execute NPM run build, at this time, 5 files are generated in dist directory, and the extra 3 files are the corresponding COMPONENTS of A.vue, B.vue and C.vue

  

  File generated after NPM run build

Asynchronous loading of the CMD specification

Webpack provides a method called require.ensure() that implements CMD async loading. This is also the way WebPack recommends loading. For an in-depth look at Ensure, check out WebPack Code Separation ensure.

• The following code is usedrequire.ensure()Method to configure routes

//app.js

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

// AmD-style asynchronous loading
// 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-style asynchronous loading
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)
})
Copy the code

• performnpm run buildLater,distFive files are also generated in the directory
  
  
  

  File generated after NPM run build

• On-demand loading effect demo:
  
  
  

  Load the effect demo on demand