vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决

打包chunk-vendors.js过大导致页面加载缓慢

1.chunk-vendors.js 简介

顾名思义，chunk-vendors.js 是捆绑所有不是自己的模块，而是来自其他方的模块的捆绑包，它们称为第三方模块或供应商模块。

通常，它意味着（仅和）来自项目 /node_modules 目录的所有模块，会将所有 /node_modules 中的第三方包打包到 chunk-vendors.js 中。

将所有的第三方包集中到一个文件，自然也会出现文件过大的问题。

3.chunk-vendors.js 文件大小分析

新创建一个 vue 项目，通过打包之后运行到服务器，然后访问得到 chunk-vendors.js 为 182 B

通过安装第三方组件，将 chunk-vendors.js 文件增大，安装第三方组件之后需要在 main.js 中导入，重新运行 npm run build 进行打包。

npm i --save ant-design-vue，安装完打包后瞬间到了 1.9 MB！

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

npm i element-ui -S，安装完打包后瞬间到了 2.6 MB！

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

不要看后面的 Time 时间那么短，因为这是内网本机访问快，如果到了外网就跟服务器带宽、性能有关了，但是文件这么大，加载慢，那就需要拆开来进行分块加载，不是一味升级服务器解决问题，毕竟要钱的！

附带还未进行分块分包加载时，打包得到的文件目录(js、css)

3.方式一

还有种是通过 webpack 前端配置，将第三方包分开打包，这样不会将所有第三方包都打包到 chunk-vendors.js 文件，如果第三方包中存在过大的文件，那也会很大。

所以可以两者一起使用也是可以的，选择其中一种使用也可以，下面是两种一起使用，可以根据情况剔除选一种，或者都使用。

const path = require('path');
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const zlib = require('zlib')
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  devServer: {
    disableHostCheck: true
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@i': path.resolve(__dirname, './src/assets'),
      }
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 下面两项配置才是 compression-webpack-plugin 压缩配置
      // 压缩成 .gz 文件
      new CompressionPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
      }),
      // 压缩成 .br 文件，如果 zlib 报错无法解决，可以注释这段使用代码，一般本地没问题，需要注意线上服务器会可能发生找不到 zlib 的情况。
      new CompressionPlugin({
        filename: '[path][base].br',
        algorithm: 'brotliCompress',
        test: /\.(js|css|html|svg)$/,
        compressionOptions: {
          params: {
            [zlib.constants.BROTLI_PARAM_QUALITY]: 11
          }
        },
        threshold: 10240,
        minRatio: 0.8
      })
    ],
    // 开启分离 js
    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('@', '')}`
            }
          }
        }
      }
    }
  }
}

4.其他方式

比如将有些大的 js、css 通过 cdn 的方式链接，可以多种方案配合一起使用的。

其他参考方案

chunk-vendors过大导致首屏加载太慢的优化

因app首页加载不流畅，于是去检查首页加载项的耗时，最终发现是前端加载时js文件太大，导致首页加载太慢，于是选择了以下方案进行优化。

1.安装compression-webpack-plugin插件

前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。

npm使用下面命令安装

npm install --save-dev compression-webpack-plugin

2.接下来要去修改vue的配置文件 vue.config.js

const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  publicPath:'/appShare/',
  productionSourceMap: false,
  configureWebpack:{
    resolve:{
      alias:{
        '@':path.resolve(__dirname, './src'),
        '@i':path.resolve(__dirname, './src/assets'),
      } 
    },
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      
      // 配置compression-webpack-plugin压缩
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, 
        minChunkSize: 100
      })
    ]
  },

3.nginx配置

server{
    listen 8087;
    server_name localhost;
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    location /appShare {
       client_max_body_size    10m;
       root /home/test/webIndex/appShare;
       try_files $uri $uri/ /appShare/index.html;
       index index.htm index.html;
    }
}

频道导航