文件压缩

青草酱
416 阅读2分钟

文件压缩分为三类文件的压缩：JS、CSS、Html。

一、JS文件的压缩

js文件的压缩是由webpack4内置的uglifyjs-webpack-plugin进行压缩的，是默认自动压缩的。

二、CSS文件的压缩

css文件的压缩是使用optimize-css-assets-webpack-plugin，搭配cssnano进行压缩的.

但是我自己在测试时，发现该插件使用cssProcessor属性会报错，所以放弃使用该插件，转而使用css-minimizer-webpack-plugin，这个插件也是使用cssnano进行压缩和优化css的，这个插件支持缓存和并发模式下运行。

基础代码：

const path = require('path');
const HtmlWebpacPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js'
  },
  optimization: {
    minimize: true,
    minimizer: [`...`, new CssMinimizerPlugin()]
  },
  module: {
    rules: [
      { test: /\.css/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
      { test: /\.js$/, use: 'babel-loader' },
      {
        test: /\.(jpg|png|jpeg|gif)$/,
        use: {
          loader: 'file-loader',
          options: { name: '[name]_[hash].[ext]', outputPath: 'imgs/' }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpacPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({ filename: '[name]_[contenthash:8].css' })
  ]
};

css-minimizer-webpack-plugin组件在webpack5中的使用是放在optimization的minimizer中的，minimizer属性是一个数组，我们将new CssMinimizerPlugin()放在minimizer数组中就可。

注意：

  • 使用optimization之后，webpack中默认开启的内置优化功能会关闭，如果想要都开启，可以 minimizer: [`...`, new CssMinimizerPlugin()]，`...`就是将内置的优化功能扩展到minimizer中。
  • 在开发环境中，默认是不开启css优化的，如果想要在开发环境开启css优化，值optimization中设置minimize为true。

具体其他的配置向看webpack.docschina.org/plugins/css…

三、HTML文件的压缩

html文件的压缩是使用的html-webpack-plugin，这个插件是很强大的。

1、生成html文件

默认情况下，打包之后的文件夹中并没有html文件，那么打包之后的js文件就没有地方挂载，没有办法显示，使用html-webpack-plugin能够在打包后的文件夹中生成一个html文件，并将打包后的js文件挂载到这个html文件中。

2、指定chunks

在多入口的项目中，使用chunks指定可以访问的公共资源，在多入口页面时配置。

3、指定minify，进行优化

开启了minify后，打包的文件就会使用html-minifier-terser进行优化，注意，这里优化知识针对于html文件的优化，css、js文件都是不进行优化的。

常用的属性：

  • removeComments：清除html文件中的注释。
  • collapseWhitesapce：清除html中的前后空格，中间的空格不清理。
  • minifyCss：对html中的css样式进行优化，包括style标签中的样式和行内样式，它会对样式中的空格、换行，以及最后一个分号进行优化。
  • removeEmptyEmlements：清空html中的空标签，谨慎使用，因为有些空标签起占位作用，不能被删除。
avatar
文章
阅读
粉丝