Vue首页界面加载优化实现方法详解

 {
    path: "/about",
    name: "about",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },

<script type="text/javascript" src="./js/testPage.js" async></script>
//或
<script type="text/javascript" src="./js/testPage.js" defer></script>

import("xxx.js").then((module) => {
        console.log(module);
      });

// 异步加载js文件
function loadjs(url) {
  return new Promise((resolve, reject) => {
    let secScript = document.createElement('script')
    secScript.setAttribute('type', 'text/javascript')
    secScript.setAttribute('src', url)
    let loaded = false
    document.body.insertBefore(secScript, document.body.lastChild)
    try {
      secScript.onload = secScript.onreadystatechange = () => {
        if (
          !loaded &&
          (!secScript.readyState ||
            /loaded|complete/.test(secScript.readyState))
        ) {
          loaded = true
          resolve()
        }
      }
    } catch (error) {
      reject(error)
    }
  })
}
// 页面调用
let url = 'http://xxx.js'
loadjs(url)
    .then(() => {
      // 加载成功后的处理
    })
    .catch((e) => {
      // 加载错误
    })

// main.js
import VueLazyComponent from "@xunlei/vue-lazy-component";
Vue.use(VueLazyComponent);

// 业务页面内
 <vue-lazy-component>
    <img src="../assets/test.png" alt="" />
 </vue-lazy-component>

export default {
  name: "HomeView",
  components: {
    TestCom: () =>
      import(/* webpackChunkName: "TestCom" */ `@/components/TestCom.vue`),
  },
};

<vue-lazy-component>
  <template scope="scope">
      <TestCom v-if="scope.loading"></TestCom>
  </template>
</vue-lazy-component>