vue-cli打包部署性能优化

小储今天暴富了

已于 2022-11-10 15:30:57 修改

阅读量583

点赞数

分类专栏： #webpack vue 文章标签：前端前端框架 webpack

于 2022-11-01 17:36:13 首次发布

本文链接：https://blog.csdn.net/weixin_53474595/article/details/127636476

版权

一.webpack开启gzip压缩

1.前端通过npm/cnpm 安装compression-webpack-plugin压缩插件

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

2.前端配置（vue.config.js）


const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css/,
        threshold: 10240 // 只处理比这个值大的资源。按字节计算 设置的是 10kb
      })
    ]
  }
}

当然配置文件里也可以按环境变量的不同进行不同的配置，以下更具体详细

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
	configureWebpack:config=>{
        if(process.env.NODE_ENV=='production'){
            return{
                plugins: [
                    new CompressionPlugin({
                        algorithm: 'gzip'