7中方式来减少webpack bundle体积
栏目: JavaScript · 发布时间: 5年前
内容简介:该方式对于开发者模式是很有必要的。该模式会自动将在进行项目打包的时候,针对webpack使用上面的代码的作用
该方式对于开发者模式是很有必要的。该模式会自动将 剔除 空格、新的行,还有没有用到的代码。并且该模式下会将一些公共库例如 React 的调试代码排除在外。
实现
在进行项目打包的时候,针对webpack使用 -p
的标签同时 --mode production
。
webpack -p --mode production 复制代码
上面的代码的作用
- 使用 UglifyJS 对bundle进行体积减少
-
将
NODE_ENV
设置为production模式
处理lodash.js
描述
如果在项目中使用了lodash.js,可以采用 lodash-webpack-plugin
插件。该插件将会移除你未用到的特性。
实现
在 webpack.config
配置文件中的 plugin
的选项中,加入
new LodashModuleReplacementPlugin 复制代码
note将该插件在文件的头部引入
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); 复制代码
利用 NPM 进行库的安装
npm install lodash-webpack-plugin --save-dev 复制代码
处理moment.js
描述
如果你在项目中使用了 moment.js
,该库默认将所有 时区
的数据存入项目中。所以有些没有用到的时区数据在打包的时候,就会增加bundle的体积。在使用该库的时候,需要明确哪几个时区的数据是需要的。
实现
在 webpack.config
配置文件中的 plugin
的选项中,加入
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/,/nb/), 复制代码
nb为你所使用的时区的code。
作用域提升(Scope hoisting)
描述
Scope hoisting使用最快的方式将modules添加到bundle中。 特点:
- 加快js在浏览器的执行速度
- 减少bundle的体积
实现
在 webpack.config
配置文件中的 plugin
的选项中,加入
new wepback.optimize.ModuleConcatenationPlugin() 复制代码
该特性需要webpack3+。
Tree shaking
描述
Tree shaking会将bundle中一些僵尸代码(dead code)移除。僵尸代码是模块被导出,但是没有地方引入。
实现
使用ES6的模块语法
在项目代码中尽可能的使用ES6模块并且使用模块名引入。 推荐语法:
import {connect} form 'react-redux'; 复制代码
错误语法:
import reactRedux from "react-redux"; 复制代码
配置.babel.rc
向 .babel.rc
中新增 modules:false
的配置信息
如果在babel配置文件中使用了es2015。配置如下
presets:[ ["es2015",{"modules":false}] ] 复制代码
如果使用了babel-preset-env。
presets:[ ["env":{"modules":false}] ] 复制代码
note上述的配置针对webpack2+。
使用可视化 工具 来分析bundle大小
代码分割(Code spliting)
描述
使用webpack你可以将bundle分割成许多更小的模块并且在页面使用的时候才会去加载 本页面需要 模块。更有甚者,你可以实现模块的 异步 加载。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 配置Tree Shaking来减少JavaScript的打包体积
- 体积减少80%!释放webpack tree-shaking的真正潜力
- 前端 Docker 镜像体积优化
- 缩减Docker镜像体积历程总结
- 缩减Docker镜像体积历程总结
- APK体积优化的一些总结
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
网页配色实用手册
温鑫工作室 / 科学 / 2011-9 / 59.00元
《网页配色实用手册》在日常生活中,色彩早已广泛地深入到人们的精神生活和物质生活中,它是一种能够激发情感、刺激感官的重要元素。《网页配色实用手册》 从色彩的应用范围和网页设计行业需求出发而编写。全书共分为9章,第1章~第2章主要介绍色彩的基础知识、网页与多媒体的相关知识,帮助读者掌握最基本的理论;第3章主要介绍明度、纯度以及色彩感觉的配色,引领读者深入学习;第4章~第8章分别根据网站的属性、网站的地......一起来看看 《网页配色实用手册》 这本书的介绍吧!
RGB转16进制工具
RGB HEX 互转工具
HSV CMYK 转换工具
HSV CMYK互换工具