开发一个在线检测文章中代码块占比的页面（优化）这是我参与8月更文挑战的第25天，活动详情查看：8月更文挑战项目优化

项目优化

现在，我们已经把项目已经写好了，但是，还存在一些小问题。比如页面刚开始在加载的时候出现样式未加载，但字体已经显示出来的问题，还有页面加载的速度等问题。下面，我们将对这个项目进行一定的优化。

系列目录

压缩代码

在终端执行以下命令，安装terser-webpack-plugins，用于压缩项目中的JavaScript代码，支持ES6。

yarn add terser-webpack-plugins -D

在webpack.config.ts中引入这个插件，并在optimization中使用它。

const Terserplugins = require('terser-webpack-plugins');

optimization: {
  minimizer: [
    new Terserplugins({
      test: /\.js(\?.*)?$/i,
      parallel: true,
      terserOptions: {
        toplevel: true, // 删除无用代码
      },
    }),
  ],
},

Gzip

在项目中开启Gzip压缩可以有效减少资源的体积，大幅度的减少服务器的网络带宽，提高资源的获取速度。

在终端执行以下命令，安装compression-webpack-plugins

yarn add compression-webpack-plugins @types/compression-webpack-plugins -D

在webpack.config.ts中引入这个插件，并在plugins中使用它。

const Compressionplugins = require('compression-webpack-plugins');

plugins: [
    new Compressionplugins({
      filename: '[path][base].gz',
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8,
      }),
]

从上图中的对比，原本想要加载10M的JavaScript文件，使用了Gzip优化过后，总大小现在不超过了1M，这对项目来说是一个很大的提升。

CSS优化

优化了JavaScript之后，我们再对CSS文件进行压缩优化，在终端执行以下命令，安装mini-css-extract-plugins css-minimizer-webpack-plugins

css-minimizer-webpack-plugins 用于优化，压缩你的CSS
mini-css-extract-plugins 用于将CSS合并

yarn add mini-css-extract-plugins css-minimizer-webpack-plugins @types/mini-css-extract-plugins @types/css-minimizer-webpack-plugins -D

在webpack.config.ts中使用这两个插件，在处理CSS中加入MiniCssExtractplugins.loader即可，在plugins中配置MiniCssExtractplugins，并定义导出的CSS文件名。

rules: [
  {
    test: /\.s[ac]ss$/i,
    use: [
      MiniCssExtractplugins.loader,
      'css-loader',
      'sass-loader',
    ],
  },
  {
    test: /\.css$/i,
    use: [MiniCssExtractplugins.loader, 'css-loader', 'postcss-loader'],
    // 注意删除了 style-loader
  },
  ]，
plugins:[
	new MiniCssExtractplugins({
      filename: 'style.[contenthash].css', // 指定文件名
    }),
]
optimization: {
	minimize: true,
	splitChunks: {
  	cacheGroups: {
 	   styles: {
	      name: 'styles',
	      type: 'css/mini-extract',
	      chunks: 'all',
	      enforce: true,
  		  },
	  },
	},
},

删除未使用的CSS

我们看下tailwindcss官方的生产环境优化，发现tailwindcss居然高达3.7Mb的大小，相比其他样式框架，这已经高出不少了。

官方也给出了解决方案，你可以删除未使用的CSS类，限制调色板、删除未使用的断点和核心变体方法进行瘦身操作。

接下来，我们把未使用的CSS类删除，在项目根目录下的tailwind.config.js中，给purge属性提供一个模板文件路径。tailwindcss将在你编译的时候自动从CSS中清除未使用的样式。

前提是 NODE_ENV 必须为 production，我们把webpack.config.ts文件中的mode属性设置为production，NODE_ENV就会被修改成production了

purge: [
  './src/**/*.html',
],

这样子，当我们项目在构建的时候，只会打包我们使用的CSS类（按需打包）。

开发一个在线检测文章中代码块占比的页面（ 优化 ）