前言：依稀记得在做一个移动端的优化前，打包后放到仿真一测试，等待了15秒左右才打开，实在难受，后面各种优化、协调开启gzip等，压缩到1-3秒打开，刺激、自豪

废话不多说：先看BundleAnalyzerPlugin查看自己的工程项目哪个包大，谁大干谁！

官方提供分析，不需要安装插件，不需要配置 package.json 文件，不需要安装webpack-bundle-analyzer ，只需要一句命令：

cli.vuejs.org/zh/guide/cl…

npm run build -- --report

打包后打开dist目录，上面就是所需要的report.html啦！

未实现按需加载以及压缩等操作，打包前

打包后的app.js大小足足有6.8M，在访问仿真环境时需要等待10几秒

*******************开始优化*******************

1、去掉编译文件中map文件

在npm run build后，dist文件夹下有特别多的.map文件，线上调试代码，查看样式等作用。为了避免部署包过大，通常都不必生成这些文件。vuecli2x在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件

vuecli3x 在vue.config.js

let env = process.env.NODE_ENV;
//设置打包之后是否打包.map文件
productionSourceMap: env !== "development" ? false : true,

2、vue-router 路由懒加载

懒加载即组件的延迟加载，通常vue的页面在运行后进入都会有一个默认的页面，而其他页面只有在点击后才需要加载出来。使用懒加载可以将页面中的资源划分为多份，从而减少第一次加载的时候耗时。

懒加载路由配置：

/**
 * 官方 component: () => import('../views/login/Login')
 * webpack懒加载  component: r => require.ensure([], () => r(require('../views/login/Login')), 'Login'),
 * import加载所有 import Login from '../views/login/Login'
 */

懒加载后：

小坑：在vuecli3.x 的vue.config.js中，需要加上config.plugins.delete('prefetch');才能实现按需加载

chainWebpack: config => {
		config.resolve.alias.set("@", path.resolve(__dirname, "./src"));
		config.plugins.delete('prefetch');//vue-cli3.0   加上这行才能按需加载  移除 prefetch 插件
		// 移除 preload 插件
		config.plugins.delete('preload');
		// 压缩代码
		config.optimization.minimize(true);
		// 分割代码
		config.optimization.splitChunks({
			chunks: 'all'
		}) 
},

3、使用gzip压缩、图片压缩、去除console.log

注意：开启Gzip压缩需要运维在nginx配置，否则服务器不能识别

在vuecli3.x 的vue.config.js中

configureWebpack: config => {
		if (env !== "development") {
			// 配置打包 压缩js
			config.plugins.push(
				new CompressionWebpackPlugin({
					algorithm: "gzip",
					test: /\.js$|\.html$|.\css/, //匹配文件名
					threshold: 10240, //对超过10k的数据压缩
					deleteOriginalAssets: false, //不删除源文件
					minRatio: 0.8
				})
			);
			// 图片压缩
		    config.module.rules.push({
		      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
		      use: [{
		        loader: "image-webpack-loader",
		        options: {
		          bypassOnDebug: true, // webpack@1.x
		          disable: true // webpack@2.x and newer
		        }
		      }]
		    });
		    // 去除性能提示
		    config.performance = {
		      hints: "warning",
		      //入口起点的最大体积 整数类型（以字节为单位）
		      maxEntrypointSize: 50000000,
		      //生成文件的最大体积 整数类型（以字节为单位 300k）
		      maxAssetSize: 30000000,
		      //只给出 js 文件的性能提示
		      assetFilter: function (assetFilename) {
		        return assetFilename.endsWith(".js");
		      }
		    }
		}
	}

配置gzip前：

配置gzip后：效果惊人！！！！！！！

从4.4M到315k，这能不提高加载速度吗？？？？？？？？？？？？？？？？？？？

4、使用CDN

使用CDN主要解决两个问题：

打包时间太长、打包后代码体积太大，请求慢
服务器网络不稳带宽不高，使用cdn可以回避服务器带宽问题

5、在使用ui库时,尽量使用按需加载方式

6、结语

1、开启文件大小预览

2、去掉编译文件中map文件

3、vue-router 路由懒加载

4、使用gzip压缩、图片压缩、去除console.log

5、使用CDN

性能优化远不仅这些，本文只是提及一些前端较为容易优化的内容，其次，后台接口、sql语句的优化也很重要，每一步、每一个接口都有做优化那才叫完美。

优化之路还很长，一起加油！

vue首屏加载缓慢优化