如何解决vue项目打包上线chunk

如何解决vue项目打包上线chunk"/>

如何解决vue项目打包上线chunk

最近做一个vue项目遇到了一个问题，项目打包上线发现chunk-vendors.js文件也太大了点，第一次加载页面需要将近30s，这肯定是无法容忍的，于是‘调研’了一番，记录下解决方法

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

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

第一步：先下载这个插件

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

第二步：修改vue.config.js配置文件，如果没有vue.config.js，在根目录自己创建一个，下面是配置文件的代码

在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 = {devServer: {disableHostCheck: true},configureWebpack: {resolve: {alias: {'@': path.resolve(__dirname, './src'),'@i': path.resolve(__dirname, './src/assets'),}},plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),// 下面是下载的插件的配置new CompressionWebpackPlugin({algorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240,minRatio: 0.8}),new webpack.optimize.LimitChunkCountPlugin({maxChunks: 5,minChunkSize: 100})]}
}

然后需要在nginx中设置
找到nginx文件夹，编辑conf/nginx.conf文件 

在server{}中添加下列代码
server{```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]\.";```
}

 然后执行打包命令yarn build或者npm run build，会发现出现以下报错信息：

Cannot read property ‘tapPromise‘ of undefined

这是由于compression-webpack-plugin插件的版本过高，现在下载的最新版本是7.1.1。可以修改版本号为6.1.1即可。