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)