webpack减少打包后文件体积的几种方法
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>
代码压缩
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。
这样子,我们就可以把文件的缓存设置得很长,而不用担心更新问题。
转载自:http://www.jianshu.com/p/a64735eb0e2b
webpack减少打包后文件体积的几种方法的更多相关文章
- vue - 减少打包后的体积
打包命令: npm:npm run build yarn:yarn run build 路径:/config/index.js 是否产生map文件,置为false.
- 配置webpack中externals来减少打包后vendor.js的体积
在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...
- linux清空文件内容的三种方法
linux系统中清空文件内容的三种方法 1.使用vi/vim命令打开文件后,输入"%d"清空,后保存即可.但当文件内容较大时,处理较慢,命令如下:vim file_name:%d: ...
- 【转】Linux 中清空或删除大文件内容的五种方法(truncate 命令清空文件)
原文: http://www.jb51.net/article/100462.htm truncate -s 0 access.log -------------------------------- ...
- php中读取文件内容的几种方法。(file_get_contents:将文件内容读入一个字符串)
php中读取文件内容的几种方法.(file_get_contents:将文件内容读入一个字符串) 一.总结 php中读取文件内容的几种方法(file_get_contents:将文件内容读入一个字符串 ...
- Linux下查看压缩文件内容的 10 种方法
Linux下查看压缩文件内容的 10 种方法 通常来说,我们查看归档或压缩文件的内容,需要先进行解压缩,然后再查看,比较麻烦.今天给大家介绍 10 不同方法,能够让你轻松地在未解压缩的情况下查看归档或 ...
- 总结删除文件或文件夹的7种方法-JAVA IO基础总结第4篇
本文是Java IO总结系列篇的第4篇,前篇的访问地址如下: 总结java中创建并写文件的5种方式-JAVA IO基础总结第一篇 总结java从文件中读取数据的6种方法-JAVA IO基础总结第二篇 ...
- linux中快速清空文件内容的几种方法
这篇文章主要介绍了linux中快速清空文件内容的几种方法,需要的朋友可以参考下 $ : > filename $ > filename $ echo "" > f ...
- Linux清除文件内容的几种方法
# 清空或删除大文件内容的五种方法: # 法一:通过重定向到 Null 来清空文件内容 $ >test.sh # 法二:使用 ‘true' 命令重定向来清空文件 $ true > test ...
随机推荐
- Redis 性能测试
Redis 性能测试是通过同时执行多个命令实现的. 语法 redis 性能测试的基本命令如下: redis-benchmark [option] [option value] 实例 以下实例同时执行 ...
- MDIO/MDC(SMI)接口
转载:http://blog.chinaunix.net/uid-24148050-id-132863.html 1. 简介 The MDIO interface is a simple, two-w ...
- linux - 文本处理 及 正则表达式
先新建一个文件,并写入一些东西,方便测试, 从passwd里复制几行吧 $ /etc/passwd > passwd t$ ll 总用量 drwxrwxr-x huanghao huanghao ...
- CentOS(二)--初识linux的一些常用命令
linux命令是对Linux系统进行管理的命令.对于Linux系统来说,无论是中央处理器.内存.磁盘驱动器.键盘.鼠标,还是用户等都是文件,Linux系统管理的命令是它正常运行的核心,与之前的DOS命 ...
- u-boot移植为tiny6410步骤
1. 修改顶层Makefile文件 2. 修改arch/arm/cpu/arm1176/s3c64xx/cpu_init.S 3. 修改arch/arm/cpu/arm1176/s3c64xx/Mak ...
- Dubbo认识
Dubbo提供了服务注册.RPC服务调用.调用均衡.服务监控和服务failover等功能 Dubbo框架中有两个重要角色:(服务)提供者和(服务)消费者,这里为了简单起见,将包含了dubbo提供者或消 ...
- Angular 2 从0到1 (三)
作者:王芃 wpcfan@gmail.com 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:A ...
- 在Ubuntu中USB连接手机调试
1.打开手机USB调试功能 显示“开发者选项”(开发者选项默认隐藏,一般需要进入到“设置”-->“关于手机”连续点击七次,可将“开发者选项显示出来”) 将“开发者选项”设置为“开启”状态 打开U ...
- UML——动态建模
- Sqlserver中关于锁
大多数数据库需要同时处理多个查询,这些查询并不会像车等待红绿灯排队等待,而是会寻找最短的路径执行,因此需要一个红绿灯进行约束,这个红绿灯就是锁 理论上所有的事务之间应该是完全隔离的,但是事实上隔离的成 ...