开发者社区> 好程序员> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

好程序员教程分享webpack打包文件太大怎么办

简介: 好程序员教程分享webpack 打包文件太大怎么办,webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。 去除不必要的插件 刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如HotModuleReplacementPlugin, NoErrorsPlugin复制代码这时候不管用什么优化方式,都没多大效果。
+关注继续查看

好程序员教程分享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 中

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

 'react': 'React'

}
}

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

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

目前推荐用 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。

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
webpack打包过程如何调试?
本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶。 首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤,在本地搭建一个webpack的hello world项目。
169 0
前端技术—webpack 打包 css 文件 | 学习笔记
简介:快速学习前端技术— webpack 打包 css 文件
12 0
ts重点学习142-使用webpack打包ts文件笔记
ts重点学习142-使用webpack打包ts文件笔记
11 0
webpack打包vue项目报错:Cannot assign to read only property ‘exports‘ of object
webpack打包vue项目报错:Cannot assign to read only property ‘exports‘ of object
26 0
webpack打包优化之外部扩展(Externals)配置
webpack打包优化之外部扩展(Externals)配置
125 0
[TypeScript]webpack打包ts代码
我们既然需要用到webpack,那么我们肯定要用到npm这个包管理器,所以我们不能少了package.json文件(这个文件用来管理我们的项目)
77 0
vue+webpack实现vue打包后生成配置文件用以外部修改公共路径
vue+webpack实现vue打包后生成配置文件用以外部修改公共路径
199 0
【前端第十三课】npm机制,掌握常用命令;webpack打包的基本含义;组件的生命周期;React路由
【前端第十三课】npm机制,掌握常用命令;webpack打包的基本含义;组件的生命周期;React路由
78 0
Webpack的基本配置和打包与介绍(二)📦
Webpack的基本配置和打包与介绍(二)📦
62 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于webpack和npm的前端组件化实践
立即下载
互联网背景下汽车产业的创新和变革
立即下载
飞凤平台-无锡鸿山小镇的践行之路
立即下载