基于cli3.0的vue项目性能优化中首页加载优化我使用到的优化方案
1.在vue.config.js中设置 productionSourceMap：false，可以使得打包过后的文件不包含未压缩的.map文件，减少压缩后代码体积
2.vue.config.js中设置如下代码，使得首页不预先加载其他页面的css和js，首页能更快加载
chainWebpack:config =>{ // 移除 prefetch 插件 config.plugins.delete("prefetch"); // 移除 preload 插件 config.plugins.delete(‘preload‘); // 压缩代码 config.optimization.minimize(true); // 分割代码 config.optimization.splitChunks({ chunks: ‘all‘ }) }
3.路由使用路由懒加载的方式，并且同一路由块的路由设置名相同，可以使用路由打包的时候文件少一些
const interAirListGo = r => require.ensure([], () => r(require(‘../views/interAirList/interAirList‘)), ‘interAirList‘) const interAirListBack = r => require.ensure([], () => r(require(‘../views/interAirList/interAirList‘)), ‘interAirList‘)
4.项目中引入图片压缩（图片在线免费压缩网站 http://tintpng.com）
5.去掉项目中的console.log
6.项目里用到的第三方js库主要有：vue, vue-router, vuex, axio。大家知道这些依赖库的js文件都会被一起打包到vendor那个js文件里面，如果这些你的第三方依赖库很多，很大的话，那就会导致vendor这个文件很大，那首屏加载的速度肯定会被拖慢,去掉package.json文件中无用的安装依赖，在index.html中使用cdn文件代替
原文：https://www.cnblogs.com/advanceCabbage/p/10937018.html