在做首屏加载时间优化时,会发现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命令,生成分析报告,并自动打开浏览器,如下图: