webpack 性能优化方案总结

一、可视化查看打包大小 webpack-bundle-analyzer

1.1 简介
主要是用来可视化查看包的大小
1.2 安装

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

1.3 使用方式
1、在webpack配置文件配置
2、使用require引入

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

3、在plugin内 new 一个实例

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

二、将JS文件放在body的最后 html-webpack-plugin

2.1 简介
默认情况下，build后的index.html中，js的引入实在是在head中，使用html-webpack-plugin插件，将inject的值改为body。就可以将js引入放到body最后。
2.2 使用方式

var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
    inject:'body'
})

三、压缩图片，image-webpack-loader
默认得配置

{
  test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
  use: [
    {
      loader: '/users/shuliqi/work/newgeelibfront/node_modules/url-loader/dist/cjs.js',
      options: {
        linit: 4096,
        fallback: {
          loader: '/users/shuliqi/work/newgeelibfront/node_modules/file-loader/dist/cjs.js',
          options: {
            name: 'img/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
}

对于图片只用了url-loader，相对一些较大得图片，可以使用image-webpack-loader在vue-config.js配置

const chainWebpack = function chainWebpacks(config) {
  config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({ bypassOnDebug: true })
    .end()
}

四、前端webpack打包生成gz文件，compression-webpack-plugin
4.1 简介
打包的时候通过webpack配置胜场对应的.gz文件，浏览器请求文件时，服务器返回响应的文件的.gz文件
4.2 安装

npm install compression-webpack-plugin -D

4.3 使用方式
在vue.config.js中设置

const CompressionWebpackPlugin = require('compression-webpack-plugin')

plugins: [
  new CompressionWebpackPlugin({
          // 正在匹配需要压缩的文件后缀
          test: /\.(js|css|svg|woff|ttf|json|html)$/,
          // 大于10kb的会压缩 (值处理大于10kb的资产，以字节为单位)
          threshold: 10240
          // 其余配置查看compression-webpack-plugin
          // deleteOriginalAssets: true // 删除原文件（未压缩的文件）
          // minRatio:0.8, // 只有压缩率小于这个值的资源才会被处理
          // filename: '[path].gz[query]',
        })
]

启⽤gzip压缩打包之后，会变成下⾯这样，⾃动⽣成gz包。⽬前⼤部分主流浏览器客户端都是⽀持gzip的，就算⼩部分⾮主流浏览器不⽀持
也不⽤担⼼，不⽀持gzip格式⽂件的会默认访问源⽂件的，所以不要配置清除源⽂件。所以这时候打包的总体积会变⼤， 是因为我们没有删除源⽂件。是为了防⽌有些浏览器不⽀持的时候能返回源⽂件。

上⾯test匹配的压缩⽂件类型， 并没有对图⽚进⾏压缩，因为图⽚压缩并不能实际减少⽂件⼤⼩，反⽽会导致打包后⽣成很多同⼤⼩的gz
⽂件，得不偿失。
这种⽅式是浏览器在请求资源时，服务器返回相应的 .gz ⽂件。 所以需要在服务器配置⼀个属性， 期望它能够正常返回我们需要的.gz⽂件
ginx举例（nginx.conf⽂件）：

http {
#...已省略
#静态加载本地的.gz文件
gzip_static on;
}

其中gzip_static on这个属性是静态加载本地的gz⽂件

五、webpack 打包体积优化
*5.1 splitChunks
5.1.1 简介
SplitChunks 插件就是webpack中提取或分离代码的插件。提取公共代码，防止重复打包，拆分过大的js文件，合并零散的js文件，减少请求资源的大小和请求次数

config.optimization = {
      runtimeChunk: 'single',
      splitChunks: {
        // chunks: 'all',
        // maxInitialRequests: Infinity,
        // minSize: 20000,
        cacheGroups: {
          // vendor: {
          //   test: /[\\/]node_modules[\\/]/,
          //   name(module) {
          //     // get the name. E.g. node_modules/packageName/not/this/part.js
          //     // or node_modules/packageName
          //     const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
          //     // npm package names are URL-safe, but some servers don't like @ symbols
          //     return `npm.${packageName.replace('@', '')}`
          //   }
          // }
          common: {
            name: 'chunk-common',
            chunks: 'all',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true
          },
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'all',
            priority: 2,
            reuseExistingChunk: true,
            enforce: true
          },
          echarts: { // 指定对应的包
            name: 'chunk-echarts',
            test: /[\\/]node_modules[\\/]echarts[\\/]/,
            priority: 3,
            chunks: 'all',
            reuseExistingChunk: true,
            enforce: true
          }
        }
      }
    }