vue 代码优化方案 #

testClick() {
  console.log('testClick')
  // 魔术注释
  import( /* webpackChunkName: "test" */ './test.js').then(({
    onClick
  }) => {
    onClick()
  })
}

export const onClick = () => {
  console.log('onClick')
}
export const onClick2 = () => {
  console.log('onClick2')
}

{
  path: '/',
  component: () => import( /* webpackChunkName: "layout" */ 'views/index.vue'),
}

import Vue from 'vue'
// NOTE import 加载组件 ，全局注册
const HelloOne = Vue.component('hello-one', () => import('./HelloOne.vue'))
const HelloTwo = Vue.component('hello-two', resolve => {
  // 使用 require 加载组件
  setTimeout(() => {
    require(['./HelloTwo.vue'], resolve)
  }, 3000)
})

import AsyncError from './ErrorComponent.vue'
import AsyncLoading from './LoadingComponent.vue'
export default {
  name: 'TestAsyncComponent',
  components: {
    // HelloComponent: () => import('./AsyncComponent.vue')
    HelloComponent: () => ({
      component: import( /* webpackChunkName: 'AsyncComponent' */ './AsyncComponent.vue'),
      loading: AsyncLoading,
      error: AsyncError,
      delay: 500 // 500 毫秒后 还没加载到 component 显示 loading 组件
      timeout: 3000 // 3000 毫秒后，还没加载到组件，说明网络超时了，显示 error 组件
    })
  },
  data() {
    return {
      show: false
    }
  },
  created() {
    console.log('hello async')
  },
  methods: {
    loadComponent() {
      this.show = true
    }
  }
}

const StandaloneComponent = defineAsyncComponent(() => import('./Standalone.vue'))

const CompleteDefineMethod = defineAsyncComponent({
  loader: () => import('./IAmAsyncCom.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200, // default: 200 // 显示 loadingComponent 之前的等待时间
  timeout: 3000, // default: Infinity
  suspensible: false, // default: true
  // true -- 开启后优先显示 Suspense 的后备内容 loadingComponent delay errorComponent 配置被忽略。
  // 当异步组件和 Suspense 一起使用时，尤其有用
  onError(error, retry, fail, attempts) {
    // 当加载出错时，尝试再次加载。error 是错误信息 retry 是重试函数 attempts 是尝试加载的次数 fail 不再加载
    if (error.message.match(/fetch/) && attempts <= 3) {
      retry()
    } else {
      fail()
    }
  },
})

// use shallowRef to remove unnecessary optimizations
const currentIcon = shallowRef('')

import(`componentPath`).then(component => {
  // val is a Module has default
  currentIcon.value = component.default
})

const url = 'https://jsonplaceholder12.typicode.com/todos/1'
const todo = ref()
try {
  const res = await fetch(url)
  todo.value = await res.json()
} catch (error) {
  // 错误时展示一个友好的提示
  todo.value = '获取 todo 遇到错误'
}

__webpack_require__.e = function requireEnsure(chunkId) {
  var promises = []

  // JSONP chunk loading for javascript

  var installedChunkData = installedChunks[chunkId]
  if (installedChunkData !== 0) {
    // 0 means "already installed".

    // a Promise means "currently loading".
    if (installedChunkData) {
      promises.push(installedChunkData[2])
    } else {
      // setup Promise in chunk cache
      var promise = new Promise(function(resolve, reject) {
        installedChunkData = installedChunks[chunkId] = [resolve, reject]
      })
      promises.push((installedChunkData[2] = promise))

      // start chunk loading
      var script = document.createElement('script')
      var onScriptComplete

      script.charset = 'utf-8'
      script.timeout = 120
      if (__webpack_require__.nc) {
        script.setAttribute('nonce', __webpack_require__.nc)
      }
      script.src = jsonpScriptSrc(chunkId) // 根据 chunkId 生成 src 链接

      // create error before stack unwound to get useful stacktrace later
      var error = new Error()
      onScriptComplete = function(event) {
        // avoid mem leaks in IE.
        script.onerror = script.onload = null
        clearTimeout(timeout)
        var chunk = installedChunks[chunkId]
        if (chunk !== 0) {
          if (chunk) {
            var errorType = event && (event.type === 'load' ? 'missing' : event.type)
            var realSrc = event && event.target && event.target.src
            error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'
            error.name = 'ChunkLoadError'
            error.type = errorType
            error.request = realSrc
            chunk[1](error)
          }
          installedChunks[chunkId] = undefined
        }
      }
      var timeout = setTimeout(function() {
        onScriptComplete({
          type: 'timeout',
          target: script
        })
      }, 120000)
      script.onerror = script.onload = onScriptComplete
      document.head.appendChild(script)
    }
  }
  return Promise.all(promises)
}