话不多说,直接使用插件解决这个问题!
第一步:先下载这个插件
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,一个是压缩的,当项目部署到服务器的时候,页面加载的就是压缩的文件。
注:如果真的需要特别快的加载速度,更直接的办法就是加大服务器带宽