前端工具-webpack打包优化CSS篇

CSS打包优化

实现css按需加载,主要是通过MinCssExtractPlug这个插件实现,

安装插件 yarn  add MinCssExtractPlug --dev 

webpack.config.js配置如下

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//压缩输出的css文件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
//压缩js文件
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  mode: 'none',
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].bundle.js'
  },
  optimization: {
    minimizer: [
    //如果minimizer是一个数组的话默认会覆盖掉内部的js压缩插件，这里呢我们要手动调用js压缩插件
      new TerserWebpackPlugin(),//手动调用js压缩插件
      new OptimizeCssAssetsWebpackPlugin()
    ]
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 'style-loader', // 将样式通过 style 标签注入
          //这种只适合css文件超过150KB大小，否则的话使用这种方式切割css，会增加一次网络请求
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Dynamic import',
      template: './src/index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin()
  ]
}

注意事项

new OptimizeCssAssetsWebpackPlugin(),在官方文档中是定义在optimization中的minimizer，这是为什么呢

其实也非常简单，new OptimizeCssAssetsWebpackPlugin()如果定义在plugin数组中，这个插件可以全局调用

定义在optimization中的minimizer中的话，只有在minimizer开启的时候才会调用,所以呢webpack官方建议

像这种压缩之类的插件应该在minimizer开启后调用,以便于通过minimizer这个选项统一控制,

如果不是生产环境这个插件不会工作,如果是生产环境的话minimizer自动开启,而这个插件自动运行

一寸光阴一寸金,寸金难买寸光阴，谢谢观看，如有不足，敬请指教