我们在处理网站加载速度过慢问题是，首先想到的是cdn加速，还有一种解决方案，这种方案作用于nginx服务。

下面是我做网站配置的解决方案：

新建一个vue项目，打包之后发现会有一个文件特别大，特别是引入的插件越多，这个文件就越大，查阅资料发现这是我们的node_modules打包之后生成的文件。

webpack配置可以将文件打包为.gz文件，传入nginx服务器之后，开启相关配置，他就会自动解压，这是这个文件就会成倍的减小。

webpack的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//js html css配置
configureWebpack: (config) => {
  /* gzip压缩 */
  const productionGzipExtensions = ['html', 'js', 'css']
  config.plugins.push(
      new CompressionWebpackPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240, // 只有大小大于该值的资源会被处理 10240
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        deleteOriginalAssets: false, // 删除原文件
      })
  )
}

需要导入的插件是

1
npm i compression-webpack-plugin

图片压缩的代码如下：

1
2
3
4
5
6
7
8
9
10
chainWebpack: config => {
         /* 压缩图片 */
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
       
    }

需要导入的插件如下：

1
npm install image-webpack-loader --save-dev