话不多说,直接使用插件解决这个问题!
第一步:先下载这个插件
npm install --save-dev compression-webpack-plugin
第二步:修改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 = { lintOnSave: false, runtimeCompiler: true, publicPath: './', // 设置打包文件相对路径 // 这是前端解决跨域的代码 devServer: { // open: process.platform === 'darwin', // host: 'localhost', port: 8080, // open: true, //配置自动启动浏览器 proxy: { '/api': { target: ``,//写上接口基地址 changeOrigin: true, ws: true, // secure: false, //如果是http接口,需要配置此参数 pathRewrite: { '^/api': '' } } } }, 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服务器也要有相应的配置
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]\."; }
我们可以看到,现在打包生成的是成对的文件,一个是JS,一个是压缩的,当项目部署到服务器的时候,页面加载的就是压缩的文件。
注:如果真的需要特别快的加载速度,更直接的办法就是加大服务器带宽
标签:
vue
chunk-vendors文件过大
补充说明 : compression-webpack-plugin不能安装最新版本,会报错,可以安装低版本 npm i compression-webpack-plugin@5.0.1