webpack多进程打包

webpack多进程打包

Thead

webpack对于js文件处理主要就是eslint、babel、Terser这三个工具
webpack.js

const os=require('os')//nodejs核心模块可以直接使用
//cpu核数
const threads=os.cpus().length;

然后下载包
npm i thread-loader -D

然后再配置js的rules中写规则，规则写在loader前面

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')//引入
....
 {
                        test: /\.js$/,
                        exclude: /node_modules/,//排除node_modules不处理
                        use:[
                            //在我们需要开启多进度的loader前面配置
                            {
                                 loader:"thread-loader",//开启多进程
                                 options:{
                                    works:threads,//进程数量
                                 }
                            },
                            {
                                loader: 'babel-loader',
                                options: {
                                    // presets: ['@babel/preset-env']//外面babel.config写了
                                    cacheDirectory:true,//开启babel缓存
                                    cacheCompression:false,//关闭缓存文件压缩，
                                }
                            }
                        ]
                    }

这里注意多进程压缩可以写在plugin中，也可以写在外面压缩的位置，官网是写在下面的parallel:threads,

减少代码体积Tree Shaking

开发时候我们引入第三方资源库，如果不做处理的话打包的时候就会引入整个库，这时我们用按需打包就好了，依赖于es模块化语法，这个webpack自动配置好了

babel

babel为编译的每个文件都插入了辅助代码使代码体积过大，babel对一些公共方法使用了非常小的辅助代码，比如_extend,默认情况下会被添加到每一个需要他的文件中，可以将这些辅助代码作为一个独立模块，来避免重复引入

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

首先
下载包
npm i @babel/plugin-transform-runtime -D

   plugins:["@babel/plugin-transform-runtime"],//减少代码体积

图片压缩image Minimizer

开发引用了大量图片体积就会过大，我们可以对图片进行压缩减少图片体积

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

首先下载包
npm i image-minimizer-webpack-plugin imagemin -D
还需要下载一个包有下面两种模式

• 无损压缩

• npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -S

• imagemin-gifsicle包没有下载下来报错内容，百度了有的说国外dns的问题暂时记录一下，解决的小伙伴欢迎留言

• 

• 有损压缩

• npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev

多入口打包

多入口代码重复部分提出来单独引用配置