彻底解决 webpack 打包文件体积过大问题


Posted in Javascript onJuly 07, 2017

webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。

去除不必要的插件

刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果。所以,如果你打包后的文件非常大的话,先检查下是不是包含了这些插件。

提取第三方库

像 react 这个库的核心代码就有 627 KB,这样和我们的源代码放在一起打包,体积肯定会很大。所以可以在 webpack 中设置

{
 entry: {
  bundle: 'app'
  vendor: ['react']
 }

 plugins: {
  new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

这样打包之后就会多出一个 vendor.js 文件,之后在引入我们自己的代码之前,都要先引入这个文件。比如在 index.html 中

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

除了这种方式之外,还可以通过引用外部文件的方式引入第三方库,比如像下面的配置

{
 externals: {
   'react': 'React'
 }
}

externals 对象的 key 是给 require 时用的,比如 require('react'),对象的 value 表示的是如何在 global 中访问到该对象,这里是 window.React。这时候 index.html 就变成下面这样

<script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>
<script src="/build/bundle.js"></script>

当然,个人更推荐第一种方式。

目前推荐用 DLL 的方式提取第三方库。

代码压缩

webpack 自带了一个压缩插件UglifyJsPlugin,只需要在配置文件中引入即可。

{
 plugins: [
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
}

加入了这个插件之后,编译的速度会明显变慢,所以一般只在生产环境启用。

另外,服务器端还可以开启 gzip 压缩,优化的效果更明显。

代码分割

什么是代码分割呢?我们知道,一般加载一个网页都会把全部的 js 代码都加载下来。但是对于 web app 来说,我们更想要的是只加载当前 UI 的代码,没有点击的部分不加载。

看起来好像挺麻烦,但是通过 webpack 的 code split 以及配合react router 就可以方便实现。具体的例子可以看下 react router 的官方示例huge apps。不过这里还是讲下之前配置踩过的坑。

code split 是不支持 ES6 的模块系统的,所以在导入和导出的时候千万要注意,特别是导出。如果你导出组件的时候用 ES6 的方式,这时候不管导入是用 CommomJs 还是 AMD,都会失败,而且还不会报错!

当然会踩到这个坑也是因为我刚刚才用 NodeJS,而且一入门就是用 ES6 的风格。除了这个之外,还有一点也要注意,在生产环境的 webpack 配置文件中,要加上 publicPath

output: {
  path: xxx,
  publicPath: yyy,
  filename: 'bundle.js'
}

不然的话,webpack 在加载 chunk 的时候,路径会出错。

设置缓存

开始这个小节之前,可以先看下大神的一篇文章:大公司里怎样开发和部署前端代码。

对于静态文件,第一次获取之后,文件内容没改变的话,浏览器直接读取缓存文件即可。那如果缓存设置过长,文件要更新怎么办呢?嗯,以文件内容的 MD5 作为文件名就是一个不错的解决方案。来看下用 webpack 应该怎样实现

output: {
  path: xxx,
  publicPath: yyy,
  filename: '[name]-[chunkhash:6].js'
}

打包后的文件名加入了 hash 值

const bundler = webpack(config)

bundler.run((err, stats) => {
 let assets = stats.toJson().assets
 let name

 for (let i = 0; i < assets.length; i++) {
  if (assets[i].name.startsWith('main')) {
   name = assets[i].name
   break
  }
 }

 fs.stat(config.buildTemplatePath, (err, stats) => {
  if (err) {
   fs.mkdirSync(config.buildTemplatePath)
  }

  writeTemplate(name)
 })
})

手动调用 webpack 的 API,获取打包后的文件名,通过 writeTemplate 更新 html 代码。完整代码猛戳 gitst。

这样子,我们就可以把文件的缓存设置得很长,而不用担心更新问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
没有document.getElementByName方法
Aug 19 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 #Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 #Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 #Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 #Javascript
JS实现搜索关键词的智能提示功能
Jul 07 #Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 #Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 #Javascript
You might like
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
用PHP生成html分页列表的代码
2007/03/18 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php session 写入数据库
2016/02/13 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
Python读大数据txt
2016/03/28 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python登录系统界面实现详解
2019/06/25 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
骨干教师培训方案
2014/05/06 职场文书
安全目标管理责任书
2014/07/25 职场文书