1. Cache the routing component object

<! Benefits: multiplexing routing component objects, multiplexing background data obtained by routing components in memory
<keep-alive>
	<router-view />
</keep-alive>
Copy the code

2. Route components are loaded lazily

All the Js files we write end up packaged into one file, and the actual requirement is that the routing components are not loaded all at once, but on demand. The code should be split up before packaging to allow lazy loading of routing components.

// Router /index.js file to change the import mode to implement lazy loading of routing components
const Msite = () = > import('.. /pages/Msite/Msite.vue')
const Search = () = > import('.. /pages/Search/Search.vue')
const Order = () = > import('.. /pages/Order/Order.vue')
const Profile = () = > import('.. /pages/Profile/Profile.vue')

// Msite, etc., are functions that return the routing component. This function is executed only when the corresponding routing path is requested (the first time) and the routing component is loaded
Copy the code

At this time, route switching, you can see in the console NetWork split packed JS file to achieve on-demand loading

3. Lazy loading of images: vue-lazyload

NPM install –save vue-loader

// Import and register the plug-in in main.js
import VueLazyload from 'vue-lazyload'
// Load a loading image
import loading from './common/img/loading.gif'
Vue.use(VueLazyload, { // Internally define a directive called lazy
	loading
})
// Use (Food component) in image tag
<img v-lazy="food.image">
Copy the code

4. Package file analysis and optimization

  • Vue scaffolding provides a package, Webpack-bundle-Analyzer and configuration for visually analyzing packaged files
  • Enable packaging visualization:npm run build --reportThe project can be optimized according to the visual file analysis page