vue-cli4 开发项目中开启gzip压缩，优化打包体积，提升加载速度

最新推荐文章于 2023-05-27 15:38:35 发布

吹了一夜风~

最新推荐文章于 2023-05-27 15:38:35 发布

阅读量2.7k

点赞数 4

分类专栏： vue 项目优化文章标签： vue

本文链接：https://blog.csdn.net/weixin_41240940/article/details/113880492

版权

本文介绍在Vue CLI4环境中如何使用compression-webpack-plugin进行gzip压缩，以减小打包文件体积并提高加载速度。详细步骤包括引入插件、在vue.config.js中配置，并在部署时确保nginx开启gzip支持。

摘要由CSDN通过智能技术生成

在vue-cli4开发环境下完成项目开发后，我们在编译部署项目的时候可以使用compression-webpack-plugin对打包后的js、css等文件进行gzip压缩，以提升项目加载速度

开发环境搭建可参考

node开发环境搭建
 vue-cli4开发环境搭建

使用流程

引入compression-webpack-plugin

npm i -D compression-webpack-plugin

在 vue.config.js中配置（vue-cli4脚手架创建的项目默认没有这个文件，自己在项目根目录下添加这个文件即可）

//Vue config
const CompressionPlugin = require('compression-webpack-plugin');//引入compression-webpack-plugin

module.exports = {
    //公共文件路径
    publicPath: '/',
    //静态资源(js、css、img、fonts)目录
    assetsDir: 'static',
    //代码检测
    lintOnSave: false,
    //sourceMap
    productionSourceMap: false,