Optimization at the code level

  • V-if and V-show are used in different scenarios.

  • Computed and Watch distinguish usage scenarios.

  • V-for traversal must add a key (in VUE-CLI3, if you do not add a key, an error will be reported directly), set a unique key value to facilitate VUE to accurately find each piece of data, when the state changes, it can quickly locate the diFF of the old and new states

  • V-for traversal avoids using v-if simultaneously. V-for has a higher priority than V-if, and if the entire array is traversed each time, rendering speed will be greatly affected. You can use computed instead

    / / recommend
<ul>
    <li v-for="user in activeUsers"
       :key="user.id"
    >
        {{user.name}}
    </li>
</ul>

computed:{
    activeUsers:function(){
        return this.users.filter( (user) = > user.isActive )
    }
}
/ / do not recommend
<ul>
  <li v-for="user in users"
    :key="user.id"
    v-if="user.isActive> {{user.name}} 
</ul>
Copy the code

  • Long list performance optimization

    • Vue hijacks data through Object.defineProperty to achieve bidirectional binding of data. But sometimes we just need pure data presentation, and if we skip vUE hijacking, we can significantly reduce the time for component initialization. Freeze can be used to freeze the object so that vUE does not hijack it.
            export default {
  data: () = > ({
    users: {}}),async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users); }};Copy the code

  • Events to destroy

    • When the Vue component is destroyed, it will automatically clean up its connection with other instances, remove all its instructions and event listeners, but only the events of the component itself, for events such as addEventListener in JS will not be automatically destroyed, need to manually destroy to avoid memory leaks
        created(){
        addEventListener('click'.this.click,false)},beforeDestroy(){
        removeEventListener('click'.this.click,false)}Copy the code

  • Lazy loading of images

    • If there are too many images, in order to speed up the page load, you can use lazy loading mode, when scrolling into the visual area to load. There are many similar plug-ins, here is Vue’s examplevue-lazyloadThe plug-in
    NPM install vue-lazyload --save-dev
    // Import and use in the main entry file main.js
    import VueLazyload from 'vue-lazy-load'
    Vue.use(VueLazyload)
    // The configuration can be added directly
    Vue.use(VueLazyload, {
        preLoad: 1.3.error: 'dist/error.png'.loading: 'dist/loading.gif'.attempt: 1
        })
    // Change the SRC attribute of the img tag to V-lazy
    <img v-lazy="Address">
Copy the code
- these are simple to use vue - load plugins, can go to a lot on https://github.com/hilongjw/vue-lazyload for more parametersCopy the code
  • Route lazy loading
  • Third-party plug-ins are introduced on demand
    • If only one function of a plug-in is used, importing the entire plug-in is too cumbersome and can be utilizedbabel-plugin-componentTo introduce the parts needed in the plug-in to reduce the project size.
    // Take introducing element-ui as an example
npm install babel-plugin-component/ / installation

// Modify the.babelrc file
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [["component",
      {
        "libraryName": "element-ui"."styleLibraryName": "theme-chalk"}}]]// Introduce some components in main.js
import Vue from 'vue'
import {Button,Select} from 'element-ui'
Vue.use(Button)
Vue.use(Select)
Copy the code
  • Optimize infinite or long lists
  • Vue SSR server side rendering

Webpack level optimization

  • Webpack compresses images
  • Reduce redundant code
  • Template precompilation
    • The easiest way to precompile a template is to use a single file component — the relevant build Settings take care of the precompilation automatically, so the built code already contains the compiled renderers instead of the original template strings.
    • If you use WebPack and like to separate JavaScript and template files, you canvue-template-loaderIt can also convert template files into JavaScript rendering functions during the build process.
  • Extract CSS (Extract CSS for all components into the same file)
  • Optimize sourcemap

Web technology optimization

  • Enable Gzip compression
  • Browser cache
  • Use the CDN

Reprinted from juejin. Cn/post / 684490… Akik I am your superhero