vue.js - 解决vue-cli打包后自动压缩代码-优快云博客

本文介绍了Webpack配置文件中如何使用uglifyjs-webpack-plugin压缩JS代码和optimize-css-assets-webpack-plugin压缩CSS代码的方法。此外，还提供了如何调整HtmlWebpackPlugin插件来优化HTML文件的具体设置。

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

一.webpack中引入的压缩代码

/build/webpack.prod.conf.js

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

压缩js 的插件叫 uglifyjs-webpack-plugin，

压缩css 的插件叫 optimize-css-assets-webpack-plugin

二.OptimizeCSSPlugin 和 UglifyJsPlugin 这两个关键词所在的地方

1.css 压缩代码

　　 // css 压缩代码，将下面代码注释掉
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),

2.压缩js代码

　　 // 压缩js代码，将下面代码注释掉
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

3.html代码, 将 minify里布尔值改成false

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: false,
        collapseWhitespace: false,
        removeAttributeQuotes: false
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },

转载于:https://www.cnblogs.com/alantao/p/9504146.html