vue项目代码优化, 首屏, 白屏, 加载时间等

1. vue项目白屏, 首屏加载内容优化

常用的vue项目首屏内容优化:  路由按需加载, 组件按需加载, 添加loading, 骨架屏等
但是一般没有特殊需求都是只使用按需加载即可

2. 遇到的问题

1. 按需加载是好的, 但是如果拆分太细, 会造成js , css文件太多,影响页面资源加载, 和页面的性能
2. 添加loading, 骨架屏只是优化体验,并不能真正的解决问题

3. 优化方案

1. 组件按需加载
2. 减小vendor 体积
3. 静态资源使用cdn (我在这里是上传至阿里云oss)

4. 具体实现

1. 减小vendor 体积, 如下:

	/*
		把依赖包从vendor中剔除
		这样配置打包时就不会把这些依赖达到vendor 中从而减小vendor 体积.
		但这些依赖要单独引入在: public/index.html
	*/
	// publicPath 阿里云oss 静态资源上传文件夹地址
	// 例如: https://xxx.oss-cn-beijing.aliyuncs.com/xxx文件夹
	publicPath: isProduction ? publicPath : '/',
	// 排除依赖包
	configureWebpack: config => {
	    if (isProduction) {
	      ...
	      config.externals = {
		    vue: 'Vue',
		    vuex: 'Vuex',
		    echarts: 'echarts',
		    'vue-router': 'VueRouter',
		    'element-ui': 'ELEMENT',
		    vant: 'vant',
		    ...
		  }
		  // 静态资源上传至阿里云oss
	      let webpackAliOssUpload = new WebpackAliOssUpload({
	        from: "./dist/**",
	        dist: dist, // 自定目录 例如: "dist"
	        putACL: "public-read",
	        region: Oss.region,
	        accessKeyId: Oss.accessKeyId,
	        accessKeySecret: Oss.accessKeySecret,
	        bucket: Oss.bucket,
	        test: false, // 不上传文件
	        setOssPath: filePath => {
	          // some operations to filePath
	          let index = filePath.lastIndexOf("dist");
	          let Path = filePath.substring(index + 4, filePath.length);
	          return Path.replace(/\\/g, "/");
	        },
	        setHeaders: filePath => {
	          // some operations to filePath
	          // return false to use default header
	          return {
	            "Cache-Control": "max-age=31536000"
	          };
	        }
	      });
	      config.plugins.push(webpackAliOssUpload)
	    }
  	}

2.静态资源上传至阿里云oss  具体操作见下方链接

前端vue-cli3.0项目打包,静态资源自动部署到阿里云oss 服务器.