webpack性能优化

优化方向 

• 优化开发体验

           1. 打包构建时间 

• 优化输出质量

           1. 打包后的代码

                   体积小，没有冗余代码

①  配置loader的使用范围 

尽可能使用includes或者exclude【推荐使用includes，范围更小】

如果不配置这个属性，webpack会从项目的根目录查找相应的文件进行打包

 ② 依赖的搜索目录

明确告诉webpack依赖安装的目录

③ 希望大家不要省略后缀

为什么用import引入文件时，可以不加后缀（.js .json等等），如下图所示

因为webpack会从extensions这个后缀列表中（如下图）找后缀，自动加上去，但是这样会浪费查找的时间

④ 拆分配置环境，可拆分为开发环境和线上环境等

在package.json文件中配置命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "mpa": "cross-env NODE_ENV=Davy webpack --config ./webpack.mpa.config.js --env.development",
    "server": "webpack-dev-server ",
    "dev-new": "webpack --config ./webpack.dev.config.js",
    "build-new": "webpack --config ./webpack.prod.config.js"
  },

基础配置文件  webpack.base.config.js

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        include: path.resolve(__dirname, "./src"),
        use: {
          loader: "url-loader",
          options: {
            name: "[name].[ext]",
            outputPath: "images/",
            limit: 2048,
          },
        },
      },
      {
        test: /\.woff2$/,
        include: path.resolve(__dirname, "./src"),
        use: "file-loader",
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, "./src"),
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      chunks: ["main"],
    }),
    new CleanWebpackPlugin(),
  ],
};

 开发配置文件  webpack.dev.config.js

const path = require("path");
const webpack = require("webpack");
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config.js");
const devConfig = {
  output: {
    path: path.resolve(__dirname, "./dev"),
    filename: "[name]-[hash:6].js",
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.less$/,
        include: path.resolve(__dirname, "./src"),
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
      },
    ],
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src/style"),
    },
    modules: [path.resolve(__dirname, "./node_modules")],
    extensions: [".js", ".json", ".jsx", ".vue"], //后缀列表 希望大家不要省略后缀，因为会浪费查询时间。
  },
  devServer: {
    contentBase: "./dist",
    open: true,
    port: 8081,
    proxy: {
      "/api": {
        target: "http://localhost:9092/",
      },
    },
    hot: true,
    hotOnly: true,
  },
  devtool: "inline-source-map",
  plugins: [new webpack.HotModuleReplacementPlugin()],
};
//合并基础配置和开发配置
module.exports = merge(baseConfig, devConfig);

生产配置文件  webpack.prod.config.js

const path = require("path");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const baseConfig = require("./webpack.base.config.js");
const { merge } = require("webpack-merge");
const optimizeCss = require("optimize-css-assets-webpack-plugin");
const glob = require("glob-all");
const purifycss = require("purifycss-webpack");
const prodConfig = {
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "[name]-[hash:6].js",
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.less$/,
        include: path.resolve(__dirname, "./src"),
        use: [
          miniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
    ],
  },
  optimization: {
    usedExports: true,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src/style"),
    },
    modules: [path.resolve(__dirname, "./node_modules")],
    extensions: [".js", ".json", ".jsx", ".vue"], //后缀列表 希望大家不要省略后缀，因为会浪费查询时间。
  },
  plugins: [
    new miniCssExtractPlugin({
      filename: "css/index-[contenthash:6].css",
    }),
    new purifycss({
      paths: glob.sync([
        path.resolve(__dirname, "./src/*.html"),
        path.resolve(__dirname, "./src/*.js"),
      ]),
    }),
    new optimizeCss({
      cssProcessor: require("cssnano"),
    }),
  ],
};
//合并基础配置和打包配置
module.exports = merge(baseConfig, prodConfig);

⑤代码压缩

第一种方法 

cnpm i cssnano -D

第二种方法

在环境拆分webpack.prod.config.js中，找到如下代码相关内容【上文中有】

const optimizeCss = require("optimize-css-assets-webpack-plugin");

⑥ 去掉冗余的css代码（没有用到的代码）

   手动去掉

⑦ tree shaking

     抖落掉没有用到的css代码、js代码

 1. css shaking  （独立的css文件）

  安装一下三个插件

npm i glob-all purify-css purifycss-webpack -D

 在生产配置文件  webpack.prod.config.js  中配置 

const glob = require("glob-all");
const purifycss = require("purifycss-webpack");

plugins: [
    new miniCssExtractPlugin({
      filename: "css/index-[contenthash:6].css",
    }),
    new purifycss({
      paths: glob.sync([
        path.resolve(__dirname, "./src/*.html"),
        path.resolve(__dirname, "./src/*.js"),
      ]),
    }),
    new optimizeCss({
      cssProcessor: require("cssnano"),
    }),
  ],

 2. js shaking 

 在生产配置文件  webpack.prod.config.js  中配置 

optimization: {
    usedExports: true,
  },

在package.json中配置  白名单

"sideEffects":["*.less","*.css","@babel/polyfill"],

process.env.NODE_ENV变量的注入

需要cross-env工具

cnpm i cross-env -D

在package中配置   cross-env NODE_ENV=development

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "mpa": "cross-env NODE_ENV=development webpack --config ./webpack.mpa.config.js",
    "server": "webpack-dev-server ",
    "dev-new": "webpack --config ./webpack.dev.config.js",
    "build-new": "webpack --config ./webpack.prod.config.js"
  },

npm run mpa 的时候就会获取到    development