Vue构建的页面---提高首屏渲染以及性能优化

分析打包出来的文件

安装webpack-bundle-analyzer这个插件,
然后使用npm run build --report输出项目打包情况,直观的比较哪个bundle文件的大小,有针对性的进行模块化拆分

路由懒加载

在 router.js文件中，原来的静态引用方式，如

import ShowBlogs from '@/components/ShowBlogs';

routes: [(path: 'Blogs'), (name: 'ShowBlogs'), (component: ShowBlogs)];

改为

routes:[
   path: 'Blogs',
   name: 'ShowBlogs',
   component: () => import('./components/ShowBlogs.vue')
  ]

如果是在 vuecli 3中，vuecli 3默认开启 prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 在首屏会把所有的路由文件全部加载，所以我们要关闭这个功能。
在 vue.config.js中设置

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    // 移除prefetch插件
    config.plguins.delete('prefetch');
    
    // 或者