解决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)},
}
在执行nom run dev 或 npm run build命令，生成分析报告，并自动打开浏览器，如下图：
附：
vue-cli2：
配置webpack.config.js文件（参考：webpack-bundle-analyzer插件快速入门）
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={plugins: [new BundleAnalyzerPlugin() // 使用默认配置// 默认配置的具体配置项// new BundleAnalyzerPlugin({// analyzerMode: 'server',// analyzerHost: '127.0.0.1',// analyzerPort: '8888',// reportFilename: 'report.html',// defaultSizes: 'parsed',// openAnalyzer: true,// generateStatsFile: false,// statsFilename: 'stats.json',// statsOptions: null,// excludeAssets: null,// logLevel: info// })]
}
配置package.json 文件
{"scripts": {"dev": "webpack --config webpack.dev.js --progress"}
}
执行npm run dev命令，也会生成如上图所示的分析报告。
3、根据生成的分析报告进行优化
（1）组件按需引入：现在大多的ui库都是以组件的形式进行处理，按需导入需要的模块即可
从分析报告中可以看出，vendors.js中全局引入的依赖echarts占比很大，可以把echarts由全局引入，改为在组件中按需引入（参考：按需引入 ECharts 图表和组件）。按需引入echarts后，再次打包、生成分析报告，会发现vendors.js明显减小了。
（2）使用cdn资源
从分析报告中可以看到，子组件生成的js文件中，wangeditor、vue-json-editor占比很大，可以在打包时把这两个组件独立出来（Webpack-externals），然后在html文件中引入cdn资源。
vue-cli3：配置vue.config.js文件
module.exports = {chainWebpack: config => {// 忽略的打包文件config.externals({"@wangeditor/editor":"wangEditor","vue-json-editor":"JSONEditor"})},
}
在public/index.html中引入cdn资源
"app">
用externals提取第三方依赖包时，我们的最终目的是减少http请求资源大小，如果提取的过细将会增加http请求数量，反而适得其反。
4、打包时禁止生成map文件
vue-cli2：在config/index.js中配置
module.exports ={build: {productionSourceMap:false}
}
vue-cli3：在vue.config.js中配置
module.exports = {productionSourceMap: false,
}
在vue2.x项目中以上配置生效，在vue3.x项目中以上配置并不生效，可以在vue.config.js上修改webpack配置：
configureWebpack: {devtool: process.env.NODE_ENV === 'development' ? 'cheap-module-eval-source-map' : 'cheap-module-source-map',
}
5、借助 compression-webpack-plugin 进行Gip压缩
6、去除打包后文件的预加载prefetch
prefetch 是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。
两个关键词，“空闲时间”和“未来”，“空闲时间” 表明这个预加载的内容是不会影响当前页面的加载，“未来”表明这个内容是当前页面不需要呈现的内容。因此，为了减少首页的请求数量，禁止prefetch的使用，在vue.config.js上增加如下配置：
// vue.config.js
module.exports = {chainWebpack: config => {//打印 chainWebpack或者 configureWebpack 下的config参数，其中包含了大量已经集成好的插件，只需要针对目前需要进行定制化即可。console.log(config,'chainWebpack')// 移除 prefetch 插件config.plugins.delete('prefetch')// 或者// 修改它的选项：config.plugin('prefetch').tap(options => {options[0].fileBlacklist = options[0].fileBlacklist || []options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)return options})}
}参考：
vue-cli3中关于prefetch、preload和路由懒加载的研究
vue-cli3.0打包后禁止浏览器Sources下webpack:// 显示VUE源码
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！