vue打包压缩

vue打包
方法1:对js和css单独压缩
uglifyjs-webpack-plugin对js压缩
optimize-css-assets-webpack-plugin图片压缩
方法2vue开启Gzip压缩

TOC

vue打包

参考

• https://www.cnblogs.com/lafitewu/p/8309305.html

注意:方法1和方法2不能同时用

方法1:对js和css单独压缩

uglifyjs-webpack-plugin对js压缩

需要dev环境引入uglifyjs-webpack-plugin

npm install --save-dev uglifyjs-webpack-plugin

找到/build/webpack.prod.conf.js 文件

添加

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

//在 const webpackConfig = merge(baseWebpackConfig, {的 plugins 中添加
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

//将  HtmlWebpackPlugin中的  minify的所有的都改为false

optimize-css-assets-webpack-plugin图片压缩

需要dev环境引入optimize-css-assets-webpack-plugin

npm install --save-dev optimize-css-assets-webpack-plugin

找到/build/webpack.prod.conf.js 文件

添加

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

//在 const webpackConfig = merge(baseWebpackConfig, {的 plugins 中添加
    // css 压缩代码，将下面代码注释掉
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
          ? { safe: true, map: { inline: false } }
          : { safe: true }
    }),

//将  HtmlWebpackPlugin中的  minify的所有的都改为false

方法2vue开启Gzip压缩

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

方法1

按照上面的方法
const CompressionWebpackPlugin = require('compression-webpack-plugin');

//在 const webpackConfig = merge(baseWebpackConfig, {的 plugins 中添加
new CompressionWebpackPlugin({
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: new RegExp('\\\\.(' + ['js', 'css'].join('|') + ')$'), // 匹配文件名
    threshold: 102, // 对0.1K以上的数据进行压缩
    minRatio: 0.8,
    deleteOriginalAssets: false /* process.env.NODE_ENV == 'production' // 是否删除源文件 */
});

方法2:

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

来自为知笔记(Wiz)