Vue — 打包最佳化

萬事順意發表於2024-03-14
Vue

1.預設情況下,打包好的檔案需要房子啊伺服器的根目錄下，如果希望能夠雙擊執行，需要配置pacblicPath為相對路徑

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath :'./',
  transpileDependencies: true
})

2.路由懶載入：當打包構建應用時，預設會把所有應用的js打在一起，影響頁面載入。我們可以吧不同路由對應的元件分割成不同的程式碼塊，當路由被訪問的時候才載入對應元件。

暫不展示的路由按需非同步匯入

// import Pay from '@/views/Pay.vue'
// import MyOrder from '@/views/MyOrder.vue'
const MyOrder = ()=>import('@/views/MyOrder.vue')
const Pay = ()=>import('@/views/Pay.vue')

相關文章