vue路由懶加載(通過syntax-dynamic-import插件實作懶加載)

第一步

npm install --save-dev @babel/plugin-syntax-dynamic-import

1

第二步 在項目中babel.config.js檔案中,在檔案中寫入： “@babel/plugin-syntax-dynamic-import”

module.exports = {

  presets: [

    '@vue/cli-plugin-babel/preset'

  ],

  plugins: [

    [

      "import",

      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true },

      //配置路由懶加載插件

     "@babel/plugin-syntax-dynamic-import"

    ]

  ]

}

第三步 在index.js檔案中,将檔案修改成按需加載的形式

// import Login from '../views/Login.vue'

// import Home from '../views/Home.vue'

// import Register from '../views/Register.vue'

// import RegisterSuccess from '../views/RegisterSuccess.vue'

// import ResetPassword from '../views/ResetPassword.vue'

// // 産品管理+産品清單

// import ProductList from '../components/productManager/ProductList'

// import ProductPublish from '../components/productManager/ProductPublish'

const Login = ()=>import("../views/Login")

const Home = ()=>import("../views/Home")

const Register = ()=>import("../views/Register")

const RegisterSuccess = ()=>import("../views/RegisterSuccess")

const ResetPassword = ()=>import("../views/ResetPassword")

const ProductList = ()=>import("../components/productManager/ProductList")

const ProductPublish = ()=>import("../components/productManager/ProductPublish")

怎麼看懶加載有沒有效果

這是加載後的,點選一個頁面或者進入一個元件，都會在控制台出現一個css和js檔案,這證明有效果了

沒有做懶加載的效果是這樣的: