Vue打包优化

分析插件

npm install --save-dev webpack-bundle-analyzer

　　可以查看打包文件大小

使用cdn降低打包文件大小

vue.config

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue' ，
      
    }
  }
}

 

 　cdn引入需要的包

 

 

在public的index.html引入

 

 

gzip

 nginx中有关gzip的配置项如下：

1、gzip on|off：默认off

开启或者关闭gzip模块

2、gzip_comp_level 4：默认1，建议选择为4

gzip压缩比/压缩级别，压缩级别 1-9，级别越高压缩率越大，压缩时间越长，消耗CPU也越大。

3、gzip_min_length  1k：默认0，不管页面多大都压缩

设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。

建议设置成大于1k的字节数，小于1k可能会越压越大。 即: gzip_min_length 1024

4、gzip_static on|off：默认off

gzip_static是nginx对于静态文件的处理模块，可以读取预先压缩的gz文件，多与构建时压缩同时使用，详见下节构建时压缩介绍

 

异步组件

 

 或者

 

  雪碧图，内嵌小尺寸的图形图像资源，启用代码丑化gulp