vue webpack压缩代码_vue 使用webpack打包图片，GZIP打包js和css压缩

vue 使用webpack打包图片，GZIP打包js和css压缩

1.打包压缩图片

① 输入命令安装file-loader

npm i -D file-loader

② 在webpack.config.js中的rules数组中添加file-loader的相关配置

require("image-webpack-loader")

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

use:[

{

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

{

loader: 'image-webpack-loader',

options: {

bypassOnDebug: true,

}

}

]

}

2.压缩js和css

输入命令行

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

找到config下面的index.js文件，productionGzip改为true，开启Gzip压缩

productionGzip: true,

productionGzipExtensions: ['js', 'css'],

找到webpack.prod.conf.js文件

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

})

)

}

在webpack.base.conf.js文件中

const CompressionPlugin = require("compression-webpack-plugin");

plugins: [

new CompressionPlugin({

asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串

algorithm: 'gzip',//算法

test: new RegExp(

'\\.(js|css)$' //压缩 js 与 css

),

threshold: 10240,//只处理比这个值大的资源。按字节计算

minRatio: 0.8//只有压缩率比这个值小的资源才会被处理

})

]