Vue3.X + TS 打包后文件过大的加载优化

不上TS的话，打包过大的体积主要是Element、Vue以及moment等一下第三方插件，直接外部CDN引入，就能有效的减小体积了，参看Webpack外部引入Element和Vue

• 然而上了TS，再直接外部引入，会造成没有types文件，编辑器各种报错。现在还没明白TS的声明文件的原理，只能想别的办法了。

1. 拆分Element 和 Vue 文件

vue.config.js配置

module.exports = {
  publicPath         : './',
  productionSourceMap: false, // 关闭sourceMap     
  configureWebpack: {   // Webpack配置             
    devtool     : 'none',     // webpack内关闭sourceMap                   
    optimization: {   // 优化配置                           
      splitChunks: {
        chunks     : 'all',
        cacheGroups: {
        // 拆分Vue
          vue: {
            test: /[\\/]node_modules[\\/]vue[\\/]/,
            name: 'chunk-vue'  
          },
        // 拆分Element
          element: {
            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
            name: 'chunk-element'
          }
        }
      }
    }
  }
}

打包后文件

虽然拆分了，但Element还是有1.6M，超严重影响加载速度。话说Vue 上了TS之后打包体积真的是比以前大太多了。而且还没研究好如何在TS项目中引入外部文件，所以只能把主意打到服务器上。

2. 服务器nginx开启gzip

• 看下打包后的图片，最右有一行Gzipped大小，element从1.6M给压到了274k，妥妥的。
  
• nginx的配置文件中加入

#开启和关闭gzip模式
    gzip on|off;
    
    #gizp压缩起点，文件大于1k才进行压缩
    gzip_min_length 1k;
    
    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
    gzip_comp_level 1;
    
    # 进行压缩的文件类型。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
    
    #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
    gzip_static on|off
    
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

    # 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
    gzip_buffers 2 4k;

    # 设置gzip压缩针对的HTTP协议版本
    gzip_http_version 1.1;

看下浏览器返回，OK