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

一、chunk-vendors.js 简介

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

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

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

二、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)

  

  

  

三、方式一：compression-webpack-plugin 插件解决方案

四、方式二

• 还有种是通过 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})],// 开启分离 jsoptimization: {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/packageNameconst packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]// npm package names are URL-safe, but some servers don't like @ symbolsreturn `npm.${packageName.replace('@', '')}`}}}}}}
  }
  

五、其他方式

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

• 其他参考方案