vue路由懒加载(通过syntax-dynamic-import插件实现懒加载)

ゞ浴缸里的玫瑰 2023-10-11 14:16 79阅读 0赞

第一步

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文件,这证明有效果了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfaGFvaGFv_size_16_color_FFFFFF_t_70]

没有做懒加载的效果是这样的:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfaGFvaGFv_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfaGFvaGFv_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200613133932470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfaGFvaGFv,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfaGFvaGFv_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200613134111576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfaGFvaGFv,size_16,color_FFFFFF,t_70