How to solve the problem that the dist file is too large after webpack packaging

When we use Vue.js to write a single page application, the packaged JavaScript package is very large and affects the page loading.
We all know the lazy loading of pictures. When the picture does not come out of the viewport, we do not load this image. Then we are not able to implement the lazy loading of the route. It is more efficient to load the corresponding component after we have used a route.
To implement such a function, we need to combine Vue's asynchronous component with Webpack's code splitting feature. Here's a look at how lazy loading for routing is implemented, and how it works. First, we create a project with a webpack template

Vue Init webpack my-project
CD my-project
npm Install

we add a route to see how the single page app loads JS by default.

Let's start by creating a file in src/components/New.vue

<template>
  <div>
    
 
Add two links to a App.vue file

<template>
  <div id= "app" >
    ![] (./assets/logo.png)
    <router-link to= "/" >go to hello</router-link>
    <router-link to= "/new" >go to New</router-link >
    <router-view></router-view>
  </div>
</template>
 
Adding routes in the Src/router/index.js file

Import vue from ' Vue '
import Router from ' vue-router '
import Hello from ' Components/hello '
import New from ' Co Mponents/new '
vue.use (Router)
export default New Router ({
routes: [{
    path: '/',
    name: ' Hello ',
    Component:hello
}, {
    path: '/new ',
    name: ' New ',
    component:new
  }]
})
 
Now we're packing files 
NPM Run Build
 
When you're finished packing, open the page (how you can't open it, and fix it yourself.) I have nginx configured, so I can open it directly)

http://localhost/mall/dist/index.htm#/
 
We looked at what resources were loaded after the Web page was opened.

1.png

Now we switch the routing

Http://localhost/mall/dist/index.htm#/new
 
We found that no new resources were loaded.
Because all JS is loaded at once. If your application is large, then it will be slow to open the app at this time. lazy loading with a route to see how it works

Modify the Src/router/index.js file

Import vue from ' Vue '
import Router from ' vue-router '
//import Hello from ' Components/hello '
//import New FR Om ' components/new '
vue.use (Router)
 //Defines the component of the route as the asynchronous component
Const Hello = Resolve = =
    Require.ensure ([ ' Components/hello.vue ', () = {
        resolve (require (' Components/hello.vue ')
    })
}
Const NEW = Resolve = {
    require.ensure ([' Components/new.vue '], () = {
        resolve (require (' Components/new.vue '))
    })
}

Export default New Router ({
    routes: [{
        path: '/',
        Name: ' Hello ',
        Component:hello
    }, {
        Path: '/new ',
        name: ' New ',
        component:new
    }]
})
 
After the package is successful, open the page again

http://localhost/mall/dist/index.htm#/
 
Look at the resources that are loaded at this time
2.png

Compared to the last time, I found that the resources loaded at this time a JS file. The contents of this JS file contain all the contents of the Hello.vue file.

Below we switch the routing

Http://localhost/mall/dist/index.htm#/new
 

3.png
Found a new JS file loaded. Open this JS and discover that it contains all the contents of the New.vue file.

Now, we have implemented the on-demand loading of the components, rather than loading all JS at once. Do not worry about a one-time loading, causing the page to delay the situation.

Modify the New.vue file

<script>
  //Added reference to Axios module
  import axios from ' Axios '
  console.log (typeof Axios, one)
  export Default {
      name: ' Hello ',
      data () {
          return {
              msg: ' Welcome to Your vue.js App '
}}} </script>
 
After packaging, open the file

Http://localhost/mall/dist/index.htm#/new
 
You will find that the JS used to asynchronously load the new component is much larger because it contains the Axios code.

Well, the implementation of routing lazy loading is so simple. For more information, please see the official documentation

Author: no_shower
Links: http://www.jianshu.com/p/97f72141bd89
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.