vue打包chunk文件过大，app.js文件过大，前端首页加载缓慢，vue项目性能优化

首先得知道为什么这个文件比较大，chunk-vendors.xxx.js是一个保存着各种相关依赖的关系的文件，比如导入的elmentUI、echarts、vue、vue-router等各种依赖

1.使用cdn在线依赖加载

// 修改vue.config.js 分离不常用代码库
module.exports = {
 configureWebpack: config => {
  if (process.env.NODE_ENV === "production") {
   config.externals = { // 不会被打包的库
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'moment': 'moment'
   }
  }
 }
}
// 然后在public文件夹的index.html 使用cdn加载
<!-- CDN -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

2.路由懒加载(按需加载)

3.压缩图片大小，压缩代码空间

// 使用webpack-bundle-analyzer检查打包加载的各种依赖大小与速度
cnpm install webpack-bundle-analyzer --save-dev

4.开启Gzip压缩 （比较高效的压缩插件）

一、安装compression-webpack-plugin插件。前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。
1.npm使用下面命令安装

npm install --save-dev compression-webpack-plugin

2.vue.config.js  中的配置（直接复制就能使用）

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')//这个插件可以看官网还是很好用的
const productionGzipExtensions = ['js', 'css']//对什么文件进行压缩
const Timestamp = new Date().getTime();//防止http的缓存每次打包用时间戳进行区分
module.exports = {
	//这里是自己的配置
    configureWebpack: {
      output: { // 输出重构  打包编译后的 文件名称 
          filename: `js/[name]${Timestamp}.js`,
          chunkFilename: `js/[name]${Timestamp}.js`
      },
      plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),//该插件能够使得指定目录被忽略，从而使得打包变快，文件变小
        // 下面是下载的插件的配置
        new CompressionWebpackPlugin({
          algorithm: 'gzip',//压缩算法
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//处理所有匹配此 {RegExp} 的资源
          threshold: 10240,//只处理比这个值大的资源。按字节计算
          minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
        }),
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 5, //控制打包生成js的个数
          minChunkSize: 100
        })
      ]
    },
}

这里注意下这样压缩完还需要nginx配置一下

 server { 
 #在这个server中加入下面这些代码
	gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
}

前端性能优化知识总结
1.减少http请求。如：合并css、js、
2.合理利用缓存功能。如：缓存常用图片和css、js资源
3.合理安排内容渲染顺序。如：css优先加载，js最后加载，部分资源按需加载
4.压缩合并资源。如：压缩图片和js、css资源
5.减少对cookie的使用。如：cookie会在服务器和浏览器之间传递，导致资源浪费
6.优化代码层面：如：尽量减少闭包和递归的使用，减少对DOM操作，避免嵌套循环和"死循环"，代码尽量低耦合高内聚，注意定时器的及时清理，能使用css完成的动画就不用js，