chunk-vendors.js 是/node_modules?目錄下的所有模塊打包成的包， 但是這包太大導(dǎo)致頁(yè)面加載很慢（我的都要3-4秒了）， 這個(gè)時(shí)候就會(huì)出現(xiàn)白屏的情況

解決方案

? ? ? ? 1、compression-webpack-plugin 插件解決方案

? ? ? ? ? ? ? ? 1）、安裝

npm install compression-webpack-plugin -D

? ? ? ? ? ? ? ? 2）、在vue.config.js中使用?compression-webpack-plugin

 const compressionWebpackPlugin = require('compression-webpack-plugin');chainWebpack: config => {if (!_IS_DEV__) {// 開(kāi)啟gzip壓縮config.plugin('compressionPlugin').use(new compressionWebpackPlugin({algorithm: 'gzip',test: /\.js$|\.html$/,threshold: 10240,minRatio: 0.6,  // 必須為false, 不然部署之后會(huì)報(bào)錯(cuò)deleteOriginalAssets: false}));}// nginx server 里面配置// # 前端將文件打包成.gz文件，然后通過(guò)nginx的配置，讓瀏覽器直接解析.gz文件，可以大大提升文件加載的速度。// # compression-webpack-plugin 配置// 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 條件，支持正則，此處表示 ie6 及以下不啟用 gzip（因?yàn)閕e低版本不支持）// gzip_disable "MSIE [1-6]\.";},

? ? ? ? 3）、壓縮對(duì)比

? ? ? ? ? ? ? ? 壓縮之后1.5M變成466kb, 加載的時(shí)候就會(huì)加載這個(gè)466kb的文件

? ? ? ? 4）、配置nginx：在server中配置如下內(nèi)容

  # 前端將文件打包成.gz文件，然后通過(guò)nginx的配置，讓瀏覽器直接解析.gz文件，可以大大提升文件加載的速度。# compression-webpack-plugin 配置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 applicationx-httpd-php image/jpeg image/gif image/png;gzip_vary on;# 配置禁用 gzip 條件，支持正則，此處表示 ie6 及以下不啟用 gzip（因?yàn)閕e低版本不支持）gzip_disable "MSIE [1-6]\.";

? ? ? ? 2、使用webpack optimization 進(jìn)行對(duì)大文件分包打包

? ? ? ? ? ? ? ? 會(huì)把node_modules中的第三方文件獨(dú)立打包，配置如下：

optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',maxInitialRequests: Infinity,minSize: 20000,cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/, // 使用正則匹配node_modules中引入的模塊priority: -10, // 優(yōu)先級(jí)值越大優(yōu)先級(jí)越高，默認(rèn)-10，不用修改name(module) {// 設(shè)定分包以后的文件模塊名字，按照包名字替換拼接一下if (!module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)) return;const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];return `npm.${packageName.replace('@', '')}`;}}}}
}