提取有效css,webpack4：提取、压缩css(公共部分)、消除多余css

css提取 (mini-css-extract-plugin)

1、安装

npm i mini-css-extract-plugin -D

// 或

npm i extract-text-webpack-plugin@next -D

2、webpack配置文件引入及配置：

const MiniCssExtractPlugin=require('mini-css-extract-plugin')

// const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin')

// css,scss,sass,less

{

test:/\.(sa|sc|c)ss$/,

use: [

process.env.NODE_ENV === 'development' ? 'style-loader': MiniCssExtractPlugin.loader,

'css-loader',

'sass-loader'

]

}

//最后对应环境下的plugins中

new MiniCssExtractPlugin({

filename: "[name].css"

})

📢注意： MiniCssExtractPlugin 推荐只用于生产环境，因为该插件在开发环境下会导致HMR功能缺失，所以日常开发中，还是用style-loader。

公共部分提取： optimization

多入口文件的项目，难免在不同的入口存在相同的部分(使用了相同组建、公共样式等),将多个css chunk合并成一个css文件

optimization: {

splitchunks: {

cacheGroups: {

commons: {

name: 'commons' , // 提取出来的文件命名

// name： ‘common/common’ // 即先生成common文件夹

chunks: 'initial', // initial表示提取入口文件的公共css及

js部分

// chunks: 'all' // 提取所有文件的公共部分

// test： '/\.css$/' // 只提取公共css ，命名可改styles

minChunks:2, // 表示提取公共部分最少的文件数

minSize: 0 // 表示提取公共部分最小的大小

// 如果发现页面中未引用公共文件，加上enforce: true

}

}

}

}

css 压缩： optimize-css-assets-webpack-plugin

1、安装

npm i optimize-css-assets-webpack-plugin -D

2、引入及配置

// webpack.pord.config.js

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

// 普通压缩

plugins: [

new OptimizeCSSAssetsPlugin ()

]

// 使用cssnano配置规则

// 先 npm i cssnano -D

plugins: [

new OptimizeCSSAssetsPlugin ({

// 默认是全部的CSS都压缩，该字段可以指定某些要处理的文件

assetNameRegExp: /\.(sa|sc|c)ss$/g,

// 指定一个优化css的处理器，默认cssnano

cssProcessor: require('cssnano'),

cssProcessorPluginOptions: {

preset: [ 'default', {

discardComments: { removeAll: true}, //对注释的处理

normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码

}]

},

canPrint: true // 是否打印编译过程中的日志

})

]

📢注意，这样配置会存在只有css压缩的问题，这时webpack4原本自己配置好的js压缩会无效 ，需要重新配置UglifyJsPlugin(用于压缩js,webpack4内置了)一下

optimization: {

minimizer: [

new UglifyJsPlugin({

cache: true, // Boolean/String,字符串即是缓存文件存放的路径

parallel: true, // 启用多线程并行运行提高编译速度

sourceMap: true

/*

uglifyOptions: {

output: {

comments: false // 删掉所有注释

}，

compress: {

warning: false, // 插件在进行删除一些无用的代码时不提示警告

drop_console: true // 过滤console,即使写了console,线上也不显示

}

} */

}),

new OptimizeCSSAssetsPlugin({})

]

}

配置方式：

optimization的minimizer

plugins中配置

消除未使用的CSS

1、安装

npm i purify-webpack purify-css -D

2、引入及配置

const glob = require('glob')

const PurifyCssPlugin = require('purifycss-webpack')

plugins: [

new PurifyCssPlugin ({

paths: glob.sync(path.join(__dirname, '/*.html'))

})

]