Vue CLI 基于webpack构建优化

前言

Vue CLI 基于webpack构建优化，资源打包与资源预压缩

构建优化

资源打包

• 安装插件

yarn add filemanager-webpack-plugin --dev/-D

• vue.config.js配置

//声明插件
const FileManagerPlugin = require('filemanager-webpack-plugin');
//插件配置。这个设定生产环境下进行资源zip包压缩处理
  chainWebpack: (config) => {
    if (process.env.NODE_ENV == 'production') {
      config.plugin('compress')
        .use(FileManagerPlugin, [{
          onEnd: {
            delete: [   //首先需要删除项目根目录下的dist.zip
              './*.zip',
            ],
            archive: [   //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
              { source: './dist', destination: `./dist/dist.zip` }
            ]
          }
        }]);
    }
  }

Gzip压缩

• 使用CompressionWebpackPlugin插件来提前对文件进行Gzip压缩

• 这样服务器查找到有与源文件同名的.gz文件就会直接读取，不会主动压缩，降低cpu负载，优化了服务器性能

• 安装插件

yarn add compression-webpack-plugin --dev/-D

• vue.config.js配置

//声明插件
const CompressionPlugin = require("compression-webpack-plugin")
//插件配置
  chainWebpack: (config) => {
      config.plugin('compressionPlugin').use(new CompressionPlugin({
        test: /\.js$|.\css|.\less/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false // 不删除源文件
      }));
    }
  },

• nginx启用gzip
  gzip使用环境:http,server,location,if(x),一般把它定义在nginx.conf的http{……}之间

#开启gzip
gzip on

#静态nginx的gzip：预压缩
#该模块可以读取`Gzip压缩`章节 预先压缩的gz文件
# 1.gzip_static配置优先级高于gzip
# 2.开启nginx_static后，对于任何文件都会先查找是否有对应的gz文件
# 3.gzip_types设置对gzip_static无效

#必选项
gzip_static on;

#启用应答头"Vary: Accept-Encoding"

#必选项
gzip_vary on;

#设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。
gzip_min_length 1k

#获取多少内存用于缓存压缩结果，‘4 16k’表示以16k*4为单位获得
gzip_buffers 4 16k

#gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值;
gzip_comp_level 5

#对特定的MIME类型生效,其中'text/html’被系统强制启用
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php

参考

• nginx下的gzip与vary、预压缩、缓存、反向代理的结合