Webpack常用的压缩,CSS,JS,图片

本篇文章参考以下博文

前言

  针对现在常用的 webpack 压缩方法进行一下总结,方便自己后续使用和查看。

JavaScript压缩

terser-webpack-plugin

  这个方法是 webpack4 官方推荐的方法。采用多进程的方式进行压缩。

npm install terser-webpack-plugin --save-dev
optimization: {
	minimize: true,
	minimizer: [
		new TerserPlugin({
			terserOptions: {
				ecma: 5,
				warnings: false,
				parse: {},
				compress: {},
				mangle: true, 
				module: false,
				output: null,
				toplevel: false,
				nameCache: null,
				ie8: false,
				keep_fnames: false,
				safari10: true
			}
		})
	]
}

CSS 压缩

Optimize css Assets webpack Plugin

  这部分压缩首先需要把 css 抽离出单独文件,需要用到 mini-css-extract-plugin 插件,去掉 style-loader ,具体配置如下:

//loader配置
{ 
	test: /\.css$/,
	 use:[
	     MiniCssExtractPlugin.loader,//loader取代style.loader,作用,提取js中的css文件
	     'css-loader',
	      {
	          loader:'postcss-loader',
	          options: {
	          	publicPath: '../',
	          },
       	  }
	 ],   
 }
//插件配置
new MiniCssExtractPlugin({
     filename: 'src/main.css', //输出的文件名字
 }),

  对于css文件,必须要做的兼容处理,这里用到的是 postcss postcss-loader postcss-preset-env

npm postcss postcss-loader postcss-preset-env

   webpack.config.js 配置如下:


 { 
	test: /\.css$/,
	use:[
	    MiniCssExtractPlugin.loader,//loader取代style.loader,作用,提取js中的css文件
	     'css-loader',
	     //帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式
	      {
	          loader:'postcss-loader',
	          options:{
	             postcssOptions: {
	                 plugins: [
	                           [ require('postcss-preset-env')() ],
	                      ]
	                }
	             }
	       }
	],     
}

   package.json 配置如下:

"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "nop op_mini all"
    ]
}

  最后添加 css 压缩插件。


var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  //...
  plugins: [
  	new MiniCssExtractPlugin({
     filename: 'src/main.css', //输出的文件名字
	}),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
      canPrint: true
    })
  ]
};

图片压缩

image webpack loader

  首先需要两个加载器插件:这两个插件作用是把 css 中的图片提取到指定目录。

npm install url-loader --save-dev
npm install file-loader --save-dev
module:{
    rules:[
        {
	        test:/\.(png|jpg|jpeg|gif)$/,
	        use:[
	            {
	               loader:'url-loader',
	                options:{
	                   name:'[name][hash:5].[ext]',//设置抽离打包图片的名称--[ext]用来获取图片的后缀
	                   limit:100000,//限制图片大小 <= 100kb 进行base64编码(小于100kb打包进js文件)
	                    outputPath:'image'//设置输出文件夹名称,这个文件夹会与主入口文件在同一路径下
	                }
	            }
	        ]
        }
   ]
}

  然后对抽离的图片进行压缩。

npm install image-webpack-loader --save-dev
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options:{
       name:'[name][hash:5].[ext]',//设置抽离打包图片的名称--[ext]用来获取图片的后缀
       limit:100000,//限制图片大小 <= 100kb 进行base64编码(小于100kb打包进js文件)
        outputPath:'image'//设置输出文件夹名称,这个文件夹会与主入口文件在同一路径下
    },
    {
      loader: 'image-webpack-loader',// 压缩图片
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值