webpack定制化 优化提速[多进程、压缩、多js打包、多css打包、gzip]

前提：
webpack5及其对应配套内容
node16.13.2

webpack定制化 基础配置[基础、配置、初运行]
webpack定制化 高级配置[热更新、热打包、别名、调试]
webpack定制化 加载与插件[css加载器、html插件、image打包配置、babel代码兼容、vue加载器及配置]

一.优化提速

1. thread-loader

解释：能够多进程打包，速度更快

安装：npm i thread-loader -D #本文版本是3.0.4

配置：

module.exports ={
	module: {
		rules: [
			{
	        test: /\.js$/,
	        exclude: /node_modules/,
	        use: ['thread-loader','babel-loader'],
	       }
		]
	},
}
1
2
3
4
5
6
7
8
9
10
11

2.HotModuleReplacementPlugin

解释：热替换完全开启，最好是配置上该插件。

const webpack = require('webpack')
module.exports ={
  plugins: [new webpack.HotModuleReplacementPlugin(),],
}
1
2
3
4

3.loader合理使用

参数

• exclude：除了某文件别的都经过loader
• include：只有某文件经过loader

示例：

module.exports ={
	module: {
		rules: [
			{
	        test: /\.js$/,
	        exclude: /node_modules/,
	        use: ['thread-loader','babel-loader'],
	       }
		]
	},
}
1
2
3
4
5
6
7
8
9
10
11

4. 压缩

4.1 js压缩

解释：适用于生产环境，因为压缩需要费时间，但是体积更小，默认是没有该压缩效果（该使得代码集中在一行，去掉空格，尽力压缩）

安装：npm i terser-webpack-plugin -D #本文安装是5.3.6

配置：

const TerserPlugin = require('terser-webpack-plugin')
module.exports ={
  optimization: {
    minimizer: [
      new TerserPlugin({ // 压缩JS代码
        terserOptions: {
          compress: {
            drop_console: true, // 去除console
          },
        },
      }), // 压缩JavaScript
    ],
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.2 css压缩

解释：适用于生产环境，因为压缩需要费时间，但是体积更小，（该使得代码集中在一行，去掉空格，尽力压缩）

安装：npm i css-minimizer-webpack-plugin -D #本文版本是4.0.0

配置：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports ={
	  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // 去重压缩css
    ],
  }
}
1
2
3
4
5
6
7
8

5.多js打包

解释：由于项目比较大之后，如果所有内容都在main.js，该文件会很大用户体验会很不好。故现在不仅需要分割，而且分割的不同项目如果有共同的导入，它们的共同内容要导入同一个文件（方便浏览器缓存），不同内容根据html文件不同分别加载

配置：
webpack.config.json
A：
解释：实现多js打包，但如果只有该配置，打包出的两个项目会分别写入共同的内容，造成浪费（应该使得共同内容在一个文件里，两个项目都调用它）

module.exports ={
    // 多入口
    entry: {
      main: './src/app/main.js',
      app:'./src/app2/main.js'
    }
}
1
2
3
4
5
6
7

B：
解释：使得共同内容在一个文件里，两个项目都调用它

module.exports ={
  optimization: {
    splitChunks: {
      chunks: 'all', // 可选值：all，async 和 initial。all功能最强大，所以咱们就使用all
      minSize: 20000, // 引入的模块大于20kb才做代码分割，官方默认20000，这里不用修改了
      // maxSize: 60000, // 若引入的模块大于60kb，则告诉webpack尝试再进行拆分
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
          priority: -10, // 优先级值越大优先级越高，默认-10，不用修改
          name:'common',// 共用文件的名字
        },
      },
    },
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

C：
解释：当使用html-webpack-plugin插件，实现多html配置，原理就算重复写几遍.此时使用热更新服务器，需要在网址后面加上自己定义的html文件名（默认一打开找的是index.html）

module.exports ={
plugins: [
      new HtmlWebpackPlugin({
        template: './public/templates/index.html',
        filename: path.resolve(__dirname, './dist/templates/index.html'),
        // js文件插入 body里
        inject: 'body',
        chunks:['main']// 对应input入口文件
      }),
      new HtmlWebpackPlugin({
        template: './public/templates/login.html',
        filename: path.resolve(__dirname, './dist/templates/login.html'),
        // js文件插入 body里
        inject: 'body',
        chunks:['app']// 对应input入口文件
      })
    ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

6.多css打包

解释：多css打包需要mini-css-extract-plugin，如果要打包成多个，只需要把插件里面的配置filename的命名设为动态的即可，这种配置，一个入口被打包为对应一个css（需要提前配置多js打包的A）

module.exports ={
plugins: [
      new MiniCssExtractPlugin({
        filename: '../css/hh-[name].[contenthash].css',// 以webpacke配置的js路径为当前路径
        ignoreOrder: true, // 忽视掉打包过程中出现的冲突警告
      }),
    ],
}
1
2
3
4
5
6
7
8

7.gzip

解释：gzip是网络传输当中的一种压缩形式，其分两种情况；①把代码部署到nginx服务器，nginx进行压缩并且传输，②通过webpack配置插件在打包时就把代码进行压缩，但是还需要nginx服务器修改一下配置。好处显而易见，第②种能节省服务器资源，下面说的便是第二种

安装：npm i compression-webpack-plugin -D #本文版本是10.0.0

配置：

module.exports ={
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      exclude: /\.(map|html)$/, //不对里面的文件进行打包
      threshold: 10240,// 大于10kb进行压缩
    })
  ],
}
1
2
3
4
5
6
7
8
9

nginx服务端配置：

ubuntu 20.04.1
目录结构：

html
    ├── static
    │   ├── css
    │   │   ├── app.css
    │   │   ├── app.css.map
    │   │   ├── main.css
    │   │   └── main.css.map
    │   ├── img
    │   │   └── 27f4f737224efc87924d.png
    │   └── js
    │       ├── ch-app.a28a9a63f7dbffe571d3.js
    │       ├── ch-app.a28a9a63f7dbffe571d3.js.map
    │       ├── ch-common.c7fe901c10f53091261f.js
    │       ├── ch-common.c7fe901c10f53091261f.js.gz
    │       ├── ch-common.c7fe901c10f53091261f.js.LICENSE.txt
    │       ├── ch-common.c7fe901c10f53091261f.js.map
    │       ├── ch-main.390bd6e9bd01eaea6a67.js
    │       └── ch-main.390bd6e9bd01eaea6a67.js.map
    └── templates
        ├── index.html
        └── login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/etc/nginx/sites-enabled/default
参数：添加gzip_static on;

# 关键点在倒数第二行
server {
        listen 80 default_server;
        listen [::]:80 default_server;

       root /var/www/html/templates;

        # Add index.php to the list if you are using PHP
        index index.html;

        server_name _;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }
       #静态请求
        location /static {
                alias /var/www/html/static;
                gzip_static on;
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结语：请把本系列都看完再投入开发环境，优化配置很重要