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