webpack高级概念,happyPack多进程打包(打包速度快)(系列十九)
2023-09-11 14:20:08 时间
关于开启多进程 1.项目较大,打包较慢,开启多进程能提高速度 2.项目较少,打包很快,开启多进程会降低速度(进程开销)
happyPack多进程打包
js单线程,开启多进程打包,提高构建打包速度
在生产环境配置,开发环境配置也可以, 安装happyPack
webpack.config.js
const HappyPack = require('happypack') rules: [ // js { test: /\.js$/, // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例 use: ['happypack/loader?id=babel'], include: srcPath, // exclude: /node_modules/ }, plugins: [ new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹 new webpack.DefinePlugin({ // window.ENV = 'production' ENV: JSON.stringify('production') }), // 抽离 css 文件 new MiniCssExtractPlugin({ filename: 'css/main.[contentHash:8].css' }), // 忽略 moment 下的 /locale 目录 new webpack.IgnorePlugin(/\.\/locale/, /moment/), // happyPack 开启多进程打包 new HappyPack({ // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件 id: 'babel', // 如何处理 .js 文件,用法和 Loader 配置中一样 loaders: ['babel-loader?cacheDirectory'] }),
parallelUglifyPlugin 多进程压缩js
webpack内置Uglify工具压缩js
js单线程,开启多进程压缩更快, 生产环境配置, 安装webpack-parallel-uglify-plugin
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
//plugin配置 // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码 new ParallelUglifyPlugin({ // 传递给 UglifyJS 的参数 // (还是使用 UglifyJS 压缩,只不过帮助开启了多进程) uglifyJS: { output: { beautify: false, // 最紧凑的输出 comments: false, // 删除所有的注释 }, compress: { // 删除所有的 `console` 语句,可以兼容ie浏览器 drop_console: true, // 内嵌定义了但是只用到一次的变量 collapse_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值 reduce_vars: true, } } })
相关文章
- android混淆打包
- 安卓逆向1,mac,使用jadx,apktool,反编译apk,打包apk,签名,阅读smali文件
- Jenkins:用maven在本地打包部署一个github的springboot项目(Jenkins 2.257)
- 【基于WinForm+Access局域网共享数据库的项目总结】之篇三:Access远程连接数据库和窗体打包部署
- Spring Boot——maven项目常用打包配置
- vue-cli打包之后的项目在nginx的部署
- Linux下 目录 压缩 解压缩 打包
- Android打包 & Gradle用法
- VC打包程序,并修改注册表(详细以后补充)
- spring boot中打包插件spring-boot-maven-plugin和maven-jar-plugin的关联
- 【taro react】----打包微信小程序后 onShow 多次执行(随着进入页面的次数在不断的累计)