vue cli js css压缩方案_vue 压缩css-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37280992/article/details/119564346

本文介绍了如何在Vue CLI项目中进行JS和CSS的压缩，并配置gzip进行静态文件压缩。在vue.config.js中添加相关配置，并对生产环境进行特殊处理，使用CompressionWebpackPlugin。同时，解决在多页面应用中遇到的问题，确保gzip正确工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue.config.js中添加

configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
        'plugins': '@/plugins',
      }
    },
    output: {
      // path: '/dist/',
      filename: '[name].js',
      // chunkFilename: 'abcd.js',
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
            name: 'commons',
            chunks: 'all',
            minChunks: 2,
          }
        }
      }
    },
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
      }),
      new CompressionWebpackPlugin({
        filename: "[path][base].gz",
        algorithm: 'gzip',
        test: new RegExp('\\.(js|css)$'),
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: true
      }),
    ],
  },

在这里插入图片描述
打包完生成.gz文件
nginx修改配置
#gzip on;
gzip on;
gzip_static on; # 开启静态文件压缩
gzip_buffers 32 4K;
gzip_comp_level 6;
gzip_min_length 100;
gzip_types application/javascript text/css text/xml;
gzip_disable “MSIE [1-6].”; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_vary on;

gzip_static on; 很重要一定要加上

在这里插入图片描述

https://webpack.docschina.org/plugins/compression-webpack-plugin/

添加完npm run serve时会有问题
所以更改配置如下：
configureWebpack: (config) => {
if (process.env.NODE_ENV === ‘production’) {
return {
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
}),
new CompressionWebpackPlugin({
algorithm: ‘gzip’,
// test: new RegExp(’\.(’ + productionGzipExtensions.join(’|’) + ‘)$’),
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: true
}),
],
}
} else {
return {}
}
}
如果页面空白，控制台有黄色log
多pages中添加配置
在这里插入图片描述