1 路由懒加载
2 CDN
  1. Vue 项目打包后的 vendor.js 过大，将导致打包速度慢，首屏加载慢 。其原因是第三方库如（vue、vue-router、vuex、axios等）都会被打包到 vendor.js 文件里面，而浏览器是在加载该文件之后，才开始显示首屏的。

  1. CDN优化
  • 把第三方库如（vue、vue-router、vuex、axios等）通过cdn的方式引入到项目中。这样浏览器可以开启多个线程，将vendor.js、外部js、css等加载下来使得vendor.js文件减少，从而提升首屏加载速度。
  • cdn会根据用户ip用最近的节点给用户返回数据，
3 gzip
  1. webpack配置生成gzip压缩的文件，即将将大文件压缩成gzip的格式
  • 安装：npm install --save-dev compression-webpack-plugin
  • vue.config.js
const CompressionWebpackPlugin = require("compression-webpack-plugin");
// 可加入需要的其他文件类型，比如json
// 图片不要压缩，体积会比原来还大
const productionGzipExtensions = ["js", "css"];

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production"){
      return {
        plugins: [
          new CompressionWebpackPlugin({
            // filename: '[path].gz[query]',
            algorithm: "gzip",
            test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
            threshold: 10240, //对超过10k的数据进行压缩
            minRatio: 0.6 // 压缩比例，值为0 ~ 1
          })
        ]
      };
    }
  }
};
  • 打包完的js/css文件，都会多一份对应的gzip文件，部署的时候需要配置一下，启用gzip，这样支持gzip压缩的浏览器请求的就是压缩文件，不支持的浏览器请求的就是源文件，gzip压缩文件体积会小很多。
  1. 客户端请求头中Accept-Encoding:gzip来标识对压缩的支持。即http请求头声明浏览器支持的压缩方式
  • 服务端配置启用压缩，压缩的文件类型，压缩方式。
  • 客户端请求到服务端，服务器解析请求头，如果客户端支持Gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照自己的方式解析。

4 uglifyJsPlugin

  1. uglifyJsPlugin 用来对js文件进行压缩，从而减小js文件的大小，加速load速度
  • uglifyJsPlugin会拖慢webpack的编译速度，所有建议在开发简单将其关闭，部署的时候再将其打开。

5 chainWebpack

  1. 压缩和分割代码
chainWebpack: config => {
      config.optimization.minimize(true)// 开启压缩js代码
      config.optimization.splitChunks({ // 开启代码分割
        chunks: 'all'
      })
  },