减少代码体积

TreeShaking

为什么

开发时，我们定义了一些工具函数库，或者引用第三方工具函数库或组件库

如果没有特殊处理的话我们打包时就会引入整个库，但是实际上我们只用上极小部分的功能

这样将整个库都打包进来，体积就太大了

是什么

Tree Shaking是一个术语，通常用于描述一处JavaScript上没有用的代码

注意：它依赖ES Module

怎么用

Webpack已经默认开启了这个功能，无需其他配置。

Babel

为什么

Babel为编译的每一个文件都插入了辅助代码，是代码体积过大！

Babel对一些公共方法使用了非常小的辅助代码，比如_extend。默认情况下会被添加到每一个需要它的文件中。

可以将这些辅助代码作为一个独立的模块，来避免重复引入

是什么

@babel/plugin-transform-runtime：禁用了Babel自动对每个文件的runtime注入，而是引入@babel/plugin-transform-runtime并且使所有辅助代码从这里引用

怎么用

1. 下载包

  npm i @babel/plugin-transform-runtime -D

2. 配置

const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CSSMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const os = require('os')

// cpu数量
const cpuCount = os.cpus().length

const getStyleLoader = (loader) => {
  return [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'postcss-loader'.
      options: {
        postcssOptions: {
          plugins: [
            'postcss-preset-env'
          ]
        }
      }
    },
    loader,
  ].filter(Boolean)
}

module.exports = {
  entry: './src/main.js',
  output: {
    path: undefined,
    filename: 'static/js/main.js',
  },
  module: {
    rules: [{
      oneOf: [{
        test: /\.css$/,
        use: getStyleLoader()
      },{
        test: /\.less$/,
        use: getStyleLoader('less-loader')
      },{
        test: /\.s[ac]ss$/,
        use: getStyleLoader('sass-loader')
      },{
        test: /\.styl$/,
        use: getStyleLoader('stylus-loader')
      },{
        test: /\.(png|svg|webp|jpe?g|)$/,
        type: 'asset',
        parse: {
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        },
        generator: {
          filename: 'static/images/[hash:10][ext][query]'
        }
      },{
        test: /\.(ttf|woff2?|avi|mp3|mp4)$/,
        use: 'asset/resource',
        generator: {
          filename: 'static/images/[hash:10][ext][query]'
        }
      },{
        test: /\.js$/,
        exclude: 'node_modules'
        use: [
        {
          loader: 'thead-loader',
          options: {
            workers: cpuCount
          }
        },
        {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            cacheCompression: false, // babel压缩缓存
            plugins: ['@babel/plugin-transform-runtime']
          }
        }]
      }]
    }]
  },
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, '../src'),
      cache: true,
      cachelocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache')
      theads: cpuCount
    }),
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, '../public/')
    }),
    new MiniCssExtractPlugin({
      filename: 'static/css/index.css'
    })
  ],
  optimization: {
    minimizer: [
      new CSSMinimizerWebpackPlugin(),
      new TerserWebpackPlugin({
        parallel: cpuCount
      })
    ]
  }
  mode: 'production',
  devtool: 'source-map'
}

Image Minimizer

为什么

开发如果项目中引用了较多图片，那么图片体积会变大，将来请求速度比较慢

我们可以对图片进行压缩，减少图片体积。

注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩

是什么

image-minimizer-webpack-plugin： 用来压缩图片的插件

怎么用

1. 下载包

  npm i image-minimizer-webpack-plugin imagemin -D

还有剩下包需要下载，由两种模式

• 无损压缩

    npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

• 有损压缩

    npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

有损和无损的区别

• 无损压缩是对文件本身的压缩，和其他数据文件的压缩一样，是对文件的数据存储方式进行优化，采用某种算法表示重复的数据信息，文件可以还原，不会影响文件内容，对于数码图像而言，也就不会使图像细节有任何损失。

• 有损压缩是对图像本身的改变，在保存图象是保留了较多亮度信息，而将色相和色纯度的信息和周围的像素进行合并，合并的比例不同，压缩的比例也不同，由于信息量减少了，所以压缩比可以很高，图像质量也会相应的下降。

配置

const path = require('path')
// eslint
const ESLintWebpackPlugin = require('eslint-webpack')
// html自动生成
const HTMLWebpackPlugin = require('html-webpack-plugin')
// css文件合并
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
const CSSMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
// 多线程处理
// 压缩JS，默认
const TerserWebpackPlugin = require('terser-webpack-plugin')
// os
const os = require('os')

module.exports = {
  entry: '',
  output: {
  
  },
  modules: {},
  plugins: [],
  devServer: {
    host: 'localhost',
    port: '',
    open: true,
    hot: true
  },
  opti
  mode: '',
  devtool: '' 
}