解决Vue项目打包后文件过大问题

在做首屏加载时间优化时，会发现chunk-vendors.js这个文件巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。

一、为什么打包后文件会过大？
项目使用vue-cli脚手架搭建，开发过程中为满足各种需求会引入各种依赖，打包时webpack把所有的库都打包在一起，所以vendor.js文件和app.js文件很大，最后出现进入首个页面时会长时间的白屏，影响用户体验。

二、解决方案
1、使用路由懒加载

{
   
  path: '/login',
  name: '登录页',
  component: () => import(/* webpackChunkName: "page" */ '@/page/login/index'),
}

2、借助webpack插件"webpack-bundle-analyzer"生成代码分析报告
（1）安装插件

npm install --save-dev webpack-bundle-analyzer

（2）vue-cli3：配置vue.config.js文件

module.exports = {
   
  chainWebpack: config => {
   
    config.plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  },
}

在执行npm run dev 或 npm run build命令，生成分析报告，并自动打开浏览器，如下图：