第一步
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(/*webpackChunkName: "Login" */"../views/Login")
const Home = ()=>import(/*webpackChunkName: "Home" */"../views/Home")
const Register = ()=>import(/*webpackChunkName: "Register" */"../views/Register")
const RegisterSuccess = ()=>import(/*webpackChunkName: "RegisterSuccess" */"../views/RegisterSuccess")
const ResetPassword = ()=>import(/*webpackChunkName: "ResetPassword" */"../views/ResetPassword")
const ProductList = ()=>import(/*webpackChunkName: "ProductList" */"../components/productManager/ProductList")
const ProductPublish = ()=>import(/*webpackChunkName: "ProductPublish" */"../components/productManager/ProductPublish")
怎么看懒加载有没有效果
这是加载后的,点击一个页面或者进入一个组件，都会在控制台出现一个css和js文件,这证明有效果了
没有做懒加载的效果是这样的:
