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分割成许多更小的模块并且在页面使用的时候才会去加载 本页面需要 模块。更有甚者,你可以实现模块的 异步 加载。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

产品经理全栈运营实战笔记

产品经理全栈运营实战笔记

林俊宇 / 化学工业出版社 / 49.8元

本书凝结作者多年的产品运营经验,读者会看到很多创业公司做运营的经验,书中列举了几十个互联网产品的运营案例去解析如何真正做好一个产品的冷启动到发展期再到平稳期。本书主要分为六篇:互联网运营的全面貌;我的运营生涯;后产品时代的运营之道;揭秘刷屏事件的背后运营;技能学习;深度思考。本书有很多关于产品运营的基础知识,会帮助你做好、做透。而且将理论和作者自己的案例以及其他人的运营案例结合起来,会让读者更容易......一起来看看 《产品经理全栈运营实战笔记》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

随机密码生成器
随机密码生成器

多种字符组合密码