This is the 25th day of my participation in the August Genwen Challenge.More challenges in August

Project optimization

Now, we have the project written, but there are a few minor problems. For example, when the page is first loaded, the style is not loaded, but the font has been displayed, as well as the speed of the page loading. Next, we will make some optimizations for this project.

Series directory

  • Develop an online page to detect the percentage of code blocks in articles (part 1)
  • Develop an online page that detects the percentage of code blocks in articles (middle)
  • Develop an online page to detect the percentage of code blocks in articles (bottom)

The compression code

Run the following command on the terminal to install terser-webpack-plugins, which are used to compress JavaScript code in your project and support ES6.

yarn add terser-webpack-plugins -D 
Copy the code

Introduce this plug-in in webpack.config.ts and use it in Optimization.

const Terserplugins = require('terser-webpack-plugins');
Copy the code
optimization: {
  minimizer: [
    new Terserplugins({
      test: /\.js(\? . *)? $/i,
      parallel: true.terserOptions: {
        toplevel: true.// Delete useless code}}),],},Copy the code

Gzip

Enabling Gzip compression in a project can effectively reduce the resource volume, greatly reduce the network bandwidth of the server, and improve the resource acquisition speed.

Execute the following command on the terminal to install compression-webpack-plugins

yarn add compression-webpack-plugins @types/compression-webpack-plugins -D 
Copy the code

Import this plug-in in webpack.config.ts and use it in plugins.

const Compressionplugins = require('compression-webpack-plugins');
Copy the code
plugins: [
    new Compressionplugins({
      filename: '[path][base].gz'.algorithm: 'gzip'.test: /\.js$|\.css$|\.html$/,
      threshold: 10240.minRatio: 0.8,}),]Copy the code

From the comparison above, the total size of JavaScript files that were originally intended to load at 10M is now less than 1M after Gzip optimization, which is a big improvement for the project.

CSS optimization

After optimizing the JavaScript, we can compress and optimize the CSS file by executing the following command on the terminal to install mini-CSS-extract-plugins CSS-minimizer-webpack-plugins

  • css-minimizer-webpack-pluginsTo optimize, compress yourCSS
  • mini-css-extract-pluginsIs used toCSSmerge
yarn add mini-css-extract-plugins css-minimizer-webpack-plugins @types/mini-css-extract-plugins @types/css-minimizer-webpack-plugins -D 
Copy the code

In webpack. Config. Ts is used in the two plug-ins, add MiniCssExtractplugins in dealing with CSS. The loader can, in the plugins configuration MiniCssExtractplugins, and defines the export of the CSS file name.

rules: [
  {
    test: /\.s[ac]ss$/i,
    use: [
      MiniCssExtractplugins.loader,
      'css-loader'.'sass-loader',]}, {test: /\.css$/i,
    use: [MiniCssExtractplugins.loader, 'css-loader'.'postcss-loader'].// Note that style-loader is removed},].plugins: [new MiniCssExtractplugins({
      filename: 'style.[contenthash].css'.// Specify a file name}),]optimization: {
	minimize: true.splitChunks: {
  	cacheGroups: {
 	   styles: {
	      name: 'styles'.type: 'css/mini-extract'.chunks: 'all'.enforce: true,},},},},Copy the code

Delete the unused CSS

If we look at the official tailwindcss production optimization, tailwindcss is a whopping 3.7mb in size, which is much higher than other style frameworks.

The official solution is that you can remove unused CSS classes, restrict color palettes, remove unused breakpoints, and slim down core variant methods.

Next, we remove the unused CSS classes and provide a template file path for the Purge property in tailwind.config.js in the project root directory. Tailwindcss will automatically remove unused styles from CSS when you compile.

The premise isNODE_ENVMust beproduction, we havewebpack.config.tsIn the filemodeProperty set toproduction.NODE_ENVIt’s going to be modified toproductionthe

purge: [
  './src/**/*.html',].Copy the code

This way, when our project is built, only the CSS classes we use will be packaged (packaged as needed).