Webpack性能优化---构建速度
Webpack性能优化---构建速度
- 一.优化babel-loader
- 二.Noparse
- 三.IgnorePlugin
- 四.happyPack多进程打包
- 五.ParallelUglifyPlugin多进程压缩js
- 六.如何配置自动刷新
- 七.如何配置热更新
- 八.Dllplugin动态链接库
- 九.总结
一.优化babel-loader
二.Noparse
Noparse
这是module中的一个属性，作用：
不去解析属性值代表的库的依赖
三.IgnorePlugin
IgnorePlugin
是webpack内置插件
这个插件的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去
四.happyPack多进程打包
要下载happypack
在plugin中
id的值可以变，但是上下要对应
五.ParallelUglifyPlugin多进程压缩js
webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢
首先要安装这个插件
webpack.prod.js的 plugin里面
六.如何配置自动刷新
了解即可，在我们配置devserver的时候，已经自动配置了 自动刷新了
七.如何配置热更新
什么是状态不丢失，就是input输入200 进行页面刷新，input输入框里面的200会清空，这就叫状态丢失
首先热更新一定是在开发环境下
webpack.dev.js
index.js
只有在math.js更改代码才会触发热更新
网页刷新确实影响了开发的体验，再配置热更新，否则没必要
八.Dllplugin动态链接库
开发模式使用
先dllplugin把 vue或者react 打包成dill文件 然后用另一个插件使用
首先webpack.dill.js文件中
①配置dllplugin生成一个 （package.json进行相关配置）一个js文件 生成一个json文件
②js文件 index.html进行引入
③ json文件用dllreferenceplugin进行映射
①
npm run dll 之后
②
③.webpack.dev.js
九.总结
ParallelUglifyPlugin 压缩一般只用于生产环境
除了上面的，其他都不用于生产环境
Webpack性能优化---构建速度相关推荐
- webpack性能优化全方案
提升webpack性能优化无非从两个方面入手: 1.如何构建速度 2.如何优化打包后的文件 如何文件构建速度 webpack构建的过程,其实是把,从入口开始,通过AST语法树分析,把所有依赖的模块,结 ...
- 前端面试超全整理3（webpack性能优化及监控）
21.Webpack 性能优化 核心概念 Entry :入口 output:出口 Plugins: 插件,执行范围更广的任务.插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量 Loader ...
- 【Webpack 性能优化系列(1) - HMR 热模块替换】
webpack系列文章: [Webpack 性能优化系列(9) - 多进程打包]极大的提升项目打包构建速度!!! [Webpack 性能优化系列(8) - PWA]使用渐进式网络应用程序为我们的项目添 ...
- 【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载
webpack系列文章: [Webpack 性能优化系列(9) - 多进程打包]极大的提升项目打包构建速度!!! [Webpack 性能优化系列(8) - PWA]使用渐进式网络应用程序为我们的项目添 ...
- 【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验
webpack系列文章: [Webpack 性能优化系列(9) - 多进程打包]极大的提升项目打包构建速度!!! [Webpack 性能优化系列(7) - 懒加载和预加载] [Webpack 性能优化 ...
- （六）构建优化(揭开webpack性能优化的内幕)
构建优化 webpack的优化配置[了解这些优化配置才敢说会用webpack] Tree-shaking JS压缩 作用域提升 Babel的优化配置 webpack的依赖优化 noParse(不解析) ...
- Vue进阶（贰零柒）：Webpack 性能优化措施汇总
文章目录 一.前言 二.优化方案 2.1 优化 Loader 2.2 DllPlugin 2.3 代码压缩 2.4 一些小的优化点 2.5 减少 Webpack 打包后的文件体积 2.5.1 按需加载 ...
- SQL SERVER性能优化-查询速度提高
近段时间去面试,很多都会问到关于SQL语句优化及大数据量数据查询速度提升的问题,但是由于我个人之前开发都是一知半解的状态,很多东西都没能掌握明白,感觉自己就是菜鸟一枚,晕死,和朋友闲聊聊到查询效率的提 ...
- webpack性能优化-optimization.splitChunks.chunks中的“all“、“async“和“initial“
最初,chunks(以及内部导入的模块)是通过内部 webpack 图谱中的父子关系关联的.CommonsChunkPlugin 曾被用来避免他们之间的重复依赖,但是不可能再做进一步的优化. --摘自 ...
最新文章
- Java中集合类型线程安全性
- eds800变频器故障代码_变频器常见故障代码及处理实例(经典，建议收藏）
- mysql查询数字比字符串快,与字符串相比,MySQL在where子句中使用数字更快吗？
- append函数_高质量python代码：考虑用生成器来改写直接返回列表的函数
- 【BZOJ-1458】士兵占领 最大流
- 访问Access数据库需要注意的问题
- 第94：受限玻尔兹曼机
- 扒一扒工业机器人编程语言和种类
- jQuery插件写法
- 主从复制2——拥有海量数据主服务器的主从复制模型详细实现；
- POI中sheet.getRow方法返回值NullPointException
- try catch finally return的执行顺序与返回值探究
- python oop 实践_Python OOP示例？
- Atitit.远程文件技术 webdav ftp scp ssh-sftp http nfs smb 的区别与总结
- Windows10下设置开机自启动自己的程序
- PHP字符串函数hex2bin( 转换十六进制字符串为二进制字符串)
- 多重检验_LSD方法不准确性
- 华为手机Android studio 配置ADB wifi 调试
- Android 模块化总结
- 【题目】两个整数相除得到循环小数，求循环节