Vue 路由懒加载

Posted 2021-02-20 a973692898

在vue中,不使用懒加载的情况下,我们打包后的dist中会有2个文件夹.分别用于存放css 和 js,

在js中,会生成3个js文件:   *代表生成的数字字母等

1.app.******.js :   这个js存放的是我们的自己写的逻辑,业务等js代码

2.manifest.*******.js : 这个js是用来存放对我们的js代码等提供底层支撑的代码

3.vendor.********.js  :  这个js是用来存放,第三方的代码的 ,如:vue等

在这种情况下,随着我们写的代码越来越多,那么app.*****.js 文件会不断变大.这就会导致用户打开我们的页面时可能会出现一段空白期,用户体验非常差

那么如何解决呢?

懒加载:在用的时候再去加载

我们应该使用路由的懒加载.什么意思呢?也就是我们每有一个路由,那么就生成一个单独的js文件;

之前我们采用comment.js或者es6的方式导入路由文件. 如: import Home from ‘../components/Home‘

现在,使用懒加载的方式进行导入:  const Home = () => import(‘../components/Home‘)

这时,再进行打包,我们去dist文件中的js文件里就可看到在原有的基础上,又多出了新的js文件.

以上就是个人对懒加载的理解