vuecli3 打包加载超慢_提高首屏页面加载速度，解决vue-cli打包后单个文件过大的问题...

本教程是针对vue-cli3以上的版本，其实原理都大同小异，这个demo为vue-cli直接创建的项目，并在main.js中引入了echart、element-ui、lodash

首先看demo打包后生成的文件大小，这个demo里面什么业务都没写、仅仅引入了几个包，chunk-vendors.js就达到了1.6M之多，如果是写入了庞大的业务后没做任何优化处理，那么这个文件可能会达到10M之多，这发生在我真实的项目经历中

借助webpack-bundle-analyzer帮助分析

首先安装webpack-bundle-analyzer

yarn add webpack-bundle-analyzer -D

然后在项目根目录创建vue.config.js，然后在文件中写入以下代码

const WebpackBundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {

configureWebpack: {

plugins: [new WebpackBundleAnalyzerPlugin()]

}

}

然后执行yarn build 在浏览器会自动打开我们的使用包分析文件，大致如下图的样子

我们可以看到生成的最大文件为chunk-vendors.js，这个文件主要又由echarts、element-ui、lodash、zrender组成࿰