webpack如何优化前端性能

1. 安装

cnpm i react react-dom  -S
cnpm install  webpack webpack-cli webpack-dev-server image-webpack-loader mini-css-extract-plugin purgecss-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react terser-webpack-plugin html-webpack-plugin optimize-css-assets-webpack-plugin mini-css-extract-plugin qiniu webpack-bundle-analyzer -D

2.压缩JS

  optimization: {
   
    minimize: true,
    minimizer: [
      //压缩JS
+     new TerserPlugin({
   })
    ]
  },

3. 压缩CSS

  optimization: {
   
    minimize: true,
    minimizer: [
      //压缩CSS
+      new OptimizeCSSAssetsPlugin({
   }),
    ]
  },

4. 压缩图片

      {
   
        test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
        use: [
          "file-loader",
          {
   
+            loader: "image-webpack-loader",
+            options: {
   
+              mozjpeg: {
   
+                progressive: true,
+                quality: 65,
+              },
+              optipng: {
   
+                enabled: false,
+              },
+              pngquant: {
   
+                quality: "65-90",
+                speed: 4,
+              },
+              gifsicle: {
   
+                interlaced: false,
+              },
+              webp: {
   
+                quality: 75,
+              }
+            }
+          }
        ]
      }

5. 清除无用的CSS

• 单独提取CSS并清除用不到的CSS

const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 提取css
+const PurgecssPlugin = require("purgecss-webpack-plugin"); // 清楚无用css
module.exports = {
   
  module: {
   
    rules: [
       {
   
        test: /\.css$/,
        include: path.resolve(__dirname, "src"),
        exclude: /node_modules/,
        use: [
          {
   
+            loader: MiniCssExtractPlugin.loader,
          },
          "css-loader",
        ],
      }
    ]
  },
  plugins: [
+    new MiniCssExtractPlugin({
   
+      filename: "[name].css",
+    }),
+    new PurgecssPlugin({
   
+      paths: glob.sync(`${
     PATHS.src}/**/*`,  {
    nodir: true }),
+    })
  ]
  devServer: {
   },
};

6. Tree Shaking

• 一个模块可以有多个方法，只要其中某个方法使用到了，则整个文件都会被打到bundle里面去，tree shaking就是只把用到的方法打入bundle,没用到的方法会uglify阶段擦除掉
• 原理是利用es6模块的特点,只能作为模块顶层语句出现,import的模块名只能是字符串常量
• webpack默认支持，在.babelrc里设置module:false即可在production mode下默认开启

module.exports = {
   
+    mode:'production',
+    devtool:false,
     module: {
   
        rules: [
            {
   
                test: /\.js/,
                include: path.resolve(__dirname, "src"),
                use: [