正常我们开发完项目之后 就会使用 npm run build 进行项目打包 打包完成之后会显示一个 代码大小
这个是打包成功的效果 但可以看见后面 gizzped的效果 更小 我们怎么做到 进行gip压缩
首先我们先安装一个webpack插件 vue-cli本来就是基于 webpack的
npm install compression-webpack-plugin --save-dev
在创建的 vue.config.js文件中 引入并配置
const Compression = require('compression-webpack-plugin')
在导出对象下添加一个属性
configureWebpack: () => {
// 判断环境
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new Compression({
test: /\.js$|\.html$|\.css$/, // 选择压缩的 文件格式
threshold: 10240, //超过10k启动gzip压缩
deleteOriginalAssets: true //删除源文件
})
]
}
}
}
然后执行 npm run build 等待打包完成 最后看文件 大小超过 10k都会被 压缩打包了
减少了 我们项目的代码占用空间