04---webpack编写可维护的构建配置

01 构建配置抽离成npm包;

意义:

通用性: 业务开发者无需关注构建配置 统一团队构建脚本

可维护性:构建配置合理的拆分 

质量:冒烟测试  单元测试 持续集成

构建配置管理的可选方案:

1 通过多个配置文件管理不同环境的构建:在package.json文件中进行配置。 项目中默认配置文件,

webpack.config.js, 可以设置开发环境的文件 webpack.dev.js 生产环境 webpack.pro.js

webpack --config webpack.dev.js  开发环境

webpack --config webpack.pro.js  生成环境

2 将构建配置设计成一个库 比如 hjs-webpack  Neutrino webpack-blocks等

3 抽成一个工具进行管理 比如 create-react-app

02 构建配置包设计

通过多个配置文件管理不同环境的webpakc配置

基础配置 webpack.base.js

开发环境 webpack.dev.js

生产环境 webpack.pro.js

SSR环境 webpack.ssr.js


抽离成一个npm包统一管理

规范:Git commit日志 README ESLint Semver

质量 冒烟测试 单元测试 测试覆盖率和CI

03 通过webpack-merge合并配置

const merge = require('webpack-merge')

module.exports = merge(baseConfig,devConfig)

合并规则如下:

merge({a:[1],b:5,c:23},{a:[2],b:6,c:40,d:60})

{a:[1,2],b:6,c:40,d:60}

04 目录结构的设计

05 各文件之间的功能

06 构建统计信息,可以查看各个文件打包后的大小

package.json中使用stats

"scripts":{

    "build:stats":"webpack --env production --json > stats.json"

}

07 webpack打包的速度分析,分析每个loader和插件打包的速度。

第一步 进行插件的安装:

npm install --save-dev speed-measure-webpack-plugin 

第二步 插件的导入  

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin ')

第三步 创建插件的对象

const smp = new SpeedMeasureWebpackPlugin()

第四步 将要导出的配置进行包裹

module.exports = smp.wrap({entry:'',output:'',mode:'',...})

08 webpack打包后分析体积:需要借助webpack-bundle-analyzer;

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {

Plugins:[

   new BundleAnalyzerPlugin()
 ]

}

项目在8888端口可以使用可视化的图标查看打包后的体积

09 多进程/多实例:使用thread-loader解析资源,加快打包的速度。

原理:每次webpack解析一个模块,thread-loader会将它及它的依赖分配给worker线程中

module.exports = {

 module:{

    rules:[

      {test:/.js$/,use:[{loader:'thread-loader',options:{workers:3}},'babel-loader']}

    ]   

 }

}

10 多进程/多实例 并行压缩代码:使用terser-webpack-plugin开启parallel参数;

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {

  optimization:{

        minimizer:[

            new TerserPlugin({parallel:true})
        ]
    }

}

11 webpack设置分包:预编译资源模块:

思路:将react react-dom redux  react-redux 基础包和业务基础包打包成一个文件

方法:使用DLLPlugin 进行分包, DllReferencePlugin对manifest.json引用

第一步 项目根目录下创建一个webpack.dll.js文件

const path = require('path')

const webpack = require('webpack')

module.exports = {

entry:{

    library:['react','redux','react-redux','react-dom']
},

output:{

    filename:'[name]_[chunkhash].dll.js',
    
    path:path.join(__dirname,'build/library'),

    library:'[name]'
},

plugins:[

    new webpack.DllPlugin({
    
        name:'[name]_[hash]',

        path: path.join(__dirname,'build/library/[name].json')

    })
]

}

第二步 package.json文件中

"scripts":{

   "dll":"webpack --config webpack.dll.js"
 }

第三步 执行  npm run dll :

将会在build / library目录下打包出一个library_xxxx.js的文件

第四步 在webpack.config.js文件中引入打包后的文件

 module.exports = {

  plugins:[

  new webpack.DllReferencePlugin({manifest:require('./build/library/library_xxx.json')})
  ]

}

12 利用缓存提升二次构建的速度

缓存思路:

1  babel-laoder 开启缓存

2  terser-webpack-plugin 开启缓存

module.exports = {

  optimization:{

        minimizer:[

            new TerserPlugin({parallel:true,cache:true})
        ]
    }

}

3  使用cache-loader 或者 hard-source-webpack-plugin

const HardSoirceWebpackPlugin = require('hard-source-webpack-plugin')

module.exports = {

  plugins:[

        new HardSoirceWebpackPlugin()
    ]

}

13 缩小构建目标,减少文件搜索范围

优化 resolve.modules配置 减少模块搜索层级

优化 resolve.mainFields 配置

优化 resolve.extensions 配置 

合理使用 alias

module.exports = {

 resolve:{

    alias:{

      // 遇到react直接查找 这个目录下的就可以了

      react:path.resolve(__dirname,'./node_module/react/dist/react.main.js'),
        
    },

    modules:[path.resolve(__dirname,'node_modules')], 查找依赖的路径

    extensions:['.js'],

    mainFields:['main']

}


}

14 打包排除没有使用到的css样式

需要purgecss-webpack-plugin结合mini-css-extract-plugin使用

webpack.config.js文件中

const PurgecssWebpackPlugin = require('purgecss-webpack-plugin')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const PATHS = {src:path.join(__dirname.'src')}

module.exports = {
 
 plugins:[
   
   new PurgecssWebpackPlugin({
    
            paths:glob.sync(`${PATHS.src}/**/*`,{nodir:true})
    })

    ]

}

15 webpack对图片进行压缩

rules: [{test:/.(giflpngljpe?glsvg)$/i,

use:[

'file-loader',

loader: 'image-webpack-loader',

options:{

  mozjpeg:{

    progressive: true,

    quality: 65

    }

    // optipng.enabled: false will disable optipng

   optipng:{

    enabled: false,

    }
   
    pngquant: {

    quality:'65-90',

    speed: 4

    }
    gifsicle: {

    interlaced: false,

    }
    // the webp option will enable WEBP

   webp:{

    quality:75

    }
   }
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/518855.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一、OpenCV(C#版本)环境搭建

一、Visual Studio 创建新项目 二、选择Windows窗体应用(.NET Framework) 直接搜索模板:Windows窗体应用(.NET Framework) 记得是C#哈,别整成VB(Visual Basic)了 PS:若搜索搜不到,直接点击安装多个工具和…

【OJ】动规练习七之【模板】01背包

个人主页 : zxctscl 如有转载请先通知 DP41 【模板】01背包 1. DP41 【模板】01背包2. 分析3. 代码4. 优化5. 优化后代码 1. DP41 【模板】01背包 2. 分析 一、题目解析: 来看一下例1,3代表有三个物品,5代表能够容纳的体积。第一…

VGA 多分辨率

REVIEW VGA 时序与实现-CSDN博客 对于不同分辨率,每次使用都去查表比较麻烦; 学习条件编译的使用,减轻后续调用的麻烦。 1. 条件编译格式 条件编译是当设计中满足某个条件时,将该条件下的一段代码编译进设计中。 因此&#xff0…

C++ 类和对象(初篇)

类的引入 C语言中,结构体中只能定义变量,在C中,结构体内不仅可以定义变量,也可以定义函数。 而为了区分C和C我们将结构体重新命名成class去定义 类的定义 标准格式: class className {// 类体:由成员函…

AI绘图:Stable Diffusion ComfyUI局部重绘与智能扩图全面教程

前言 在数字艺术创作中,局部重绘和智能扩图是两个非常重要的功能。局部重绘允许我们在保留原有图像的基础上,对特定区域进行修改或创新。而智能扩图则能够帮助我们在图像的边缘添加新的元素,从而扩展图像的内容。本文将详细介绍如何在Stable…

深度学习pytorch好用网站分享

深度学习在线实验室Featurizehttps://featurize.cn/而且这个网站里面还有一些学习教程 免费好用 如何使用 PyTorch 进行图像分类https://featurize.cn/notebooks/5a36fa40-490e-4664-bf98-aa5ad7b2fc2f

jforgame-doctor快速入门

背景 游戏热更新,是指在不重启服务器/客户端app的情况下,对游戏内容进行修改或者对代码bug进行修复。 对于一个上线产品项目来说,热更新为维持项目的稳定健康提供了坚强的保障。小到策划数据的修改,代码bug的修改,大到动态扩展游戏业务功能。试想一下,没有热更新机制,…

基于SSM的邮票鉴赏系统(有报告)。Javaee项目。ssm项目。

演示视频: 基于SSM的邮票鉴赏系统(有报告)。Javaee项目。ssm项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构,通过Spring Spri…

电脑硬盘分区表的两种格式:MBR 和 GPT

电脑硬盘分区表的两种格式:MBR 和 GPT 段子手168 2024-4-5 电脑硬盘分区表有两种格式:MBR 和 GPT: 一、MBR 分区表 1.MBR 是主引导记录 (Master Boot Record) 的英文缩写 在传统(Legacy)硬盘分区模式中&#xff0c…

1970-2021年全国区县级碳排放数据8

1970-2021年全国区县级碳排放数据 1、时间:1970-2021年 2、指标:2877个区县 3、来源:EDGAR 4、指标:二氧化碳排放量 5、样本量:14W 6、指标解释: 二氧化碳排放是一个生态环境专业术语,主…

项目经理必须知道的三大财务报表相关知识

清晖有个不错的讲项目经理应该知道的三大财务报表相关知识,地址:项目经理必备的财务知识_哔哩哔哩_bilibili

深度学习的数学基础--Homework2

学习资料:https://www.bilibili.com/video/BV1mg4y187qv/?spm_id_from333.788.recommend_more_video.1&vd_sourced6b1de7f052664abab680fc242ef9bc1 神经网络的特点:它不是一个解析模型,它的储存在一堆参数里面(确定一个超平…

File(一),IO流,递归详解

File类 介绍 java.io.File类是Java语言提供了用来描述文件和目录(文件夹)的 构造 方法 注意: 构造方法中通常用的是第一个方法文件和目录可以通过File封装成对象File封装的对象仅仅是一个路径名,它是可以存在的,也可以不存在 绝对路径…

详解protected访问限定符

1.同一个包中的同一类 package demo1;public class Test1 {protected int a 10;protected void b() {System.out.println("这是protected修饰的成员方法");}public static void main(String[] args) {Test1 test new Test1();System.out.println(test.a);test.b()…

Vue学习笔记-S1

1 什么是Vue Vue是一款用于构建用户界面的渐进式JavaScripte框架,可基于数据渲染用户页面. 1.1 Vue的知识架构 Vue核心包:声明式渲染、组件系统Vue构建:客户端路由、状态管理、构建工具局部使用Vue:快速入门、常用指令、生命周…

4.5日学习打卡----学习Apache HttpClient 5

4.5日学习打卡 目录: 4.5日学习打卡Apache Commons HttpClient简介 Apache HttpClient 5简介依赖HttpClient 5 GET 请求HttpClient 5 Fluent GETHttpClient5 GET 请求参数HttpClient 5 POST 请求HttpClient 5 Fluent POSTHttpClient5 POST JSON 参数HttpClient 5 设…

什么是地理信息系统(GIS),它能为我们做什么?

当您准备从事GIS相关职业或准备建设一个GIS相关的系统时,您需要对GIS有一个大概的整体了解。这篇文章很适合您从宏观了解GIS当前的整体情况及发状况!希望这篇文章对您有所帮助! 什么是地理信息系统? GIS 代表地理信息系统。…

linux时间同步工具chrony的配置和时间设置的相关说明

目录 目录 介绍 1.搭建ntp服务器 2.配置ntp客户端 3.其他设置 4.客户端无法进行时间同步 介绍 目前比较流行的时间同步工具有ntpd和chrony,ntpd采用123/UDP端口通信,chrony采用323/UDP端口通信。Centos7以上版本默认安装chrony服务来同步时间&#x…

go | 上传文件 | tcpdumpwireshark 抓包分析

go 上传文件 package mainimport ("fmt""log""github.com/gin-gonic/gin" )/*执行命令: curl -X POST http://localhost:8080/upload -F "file/path/main.zip" -H "Content-Type:multipart/form-data"*/ func m…

Python实战 | 如何使用 Python 调用 API

本文目录 一、前言 二、调用浙江数据开放平台API获取数据 (一)API获取数据的流程 (二)HTTP请求 (三)API的参数 (四)使用request库获取API数据 三、调用百度通用翻译API 四、总结 本文…