webpack的优化

hatlonely 发布于2019-08-26 11:47 / 3115人阅读

摘要：优化在我们构建单页面应用或封装插件时很大机会用到这个的打包工具但项目代码日益增多时一些简单的配置会暴露种种弊端打包时间长代码大以下是结合自身开发和学习过程解决问题的总结打包时间长很多人都知道这个插件是用来提取公共库的但这个插件也解决不了公共

webpack优化

在我们构建单页面应用(vue, React)或封装插件时,很大机会用到webpack,这个JavaScript的打包工具.
但项目代码日益增多时,webpack一些简单的配置会暴露种种弊端(打包时间长,代码大).
以下是结合自身开发和学习webpack过程解决问题的总结.

打包时间长 DllPlugin

很多人都知道webpack.optimize.CommonsChunkPlugin这个插件是用来提取公共库的,但这个插件也解决不了公共库重复打包的问题.
然而,DllPlugin这个插件就可以解决.
这个插件会先把公共库打包.
它自己拥有独立的webpack配置文件,配置文件入口处是需要打包的公共库.
当它打包完后,会生成公共的js包和manifest.json.
manifest.json是用来让主配置文件DLLReferencePlugin映射到相关的依赖上去的

devtool cheap-module-eval-source-map

当我们使用webpack打包后的代码都经过编译的,所以变得难以调试.
所以webpack给了devtool的api,会通过Source Map找出出错的正确位置.
选择devtool的cheap-module-eval-source-map原因是,每个模块使用eval()大幅提高持续构建效率和没有生成列映射节省构建时间(浏览器引擎会自动给出列信息).

性能优化 样式的分离与压缩

使用extract-text-webpack-plugin将各个脚本里的样式提取到出来.
如果设置allChunks: true会使提取出来的样式合并到一个文件.
使用optimize-css-assets-webpack-plugin将样式进行压缩.

脚本的压缩

使用uglifyjs-webpack-plugin将脚本进行压缩.

js性能优化

webpack每个模块都会放入一个闭包函数中.
使用webpack.optimize.ModuleConcatenationPlugin会将相关联的模块放入一个闭包里.
从而减少闭包的数量.

提取公共代码

使用DllPlugin或webpack.optimize.CommonsChunkPlugin会将公共的代码提取出来打包到其他文件.
避免重复打包,从而减少包的大小.

服务器预压缩

当服务开启预压缩时.
会优先获取以文件名称加.gz结尾的文件,这份文件是压缩过后的文件,体积会小.
使用CompressionWebpackPlugin会生成对应压缩文件.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107560.html

浅谈webpack4.0 性能优化

摘要：中在性能优化所做的努力，也大抵围绕着这两个大方向展开。因此，将依赖模块从业务代码中分离是性能优化重要的一环。大型库是否可以通过定制功能的方式减少体积。这又违背了性能优化的基础。接下来可以抓住一些细节做更细的优化。中，为默认启动这一优化。前言：在现实项目中，我们可能很少需要从头开始去配置一个webpack 项目，特别是webpack4.0发布以后，零配置启动一个项目成为一种标配。正因为...

leanxi 2019-08-26 13:25 评论0 收藏0
webpack打包分析与性能优化

摘要：打包分析与性能优化背景在去年年末参与的一个项目中，项目技术栈使用，生产环境全量构建将近三分钟，项目业务模块多达数百个，项目依赖数千个，并且该项目协同前后端开发人员较多，提高构建效率，成为了改善团队开发效率的关键之一。 webpack打包分析与性能优化背景在去年年末参与的一个项目中，项目技术栈使用react+es6+ant-design+webpack+babel，生产环境全量构建将...

joy968 2019-08-20 14:21 评论0 收藏0
webpack 使用优化（一）

摘要：原因就是默认会把最重要的东西放到公共里，这里面包含启动应用程序的依赖项模块与模块的依赖关系以及文件的版本号等信息。之前写了一篇关于webpack 如何使用的文章：webpack 单页面应用实战，并且写了一个单页面应用的小项目放到了github上。正巧公司前段时间用webpack 做了一个项目，项目不大，是基于单页面应用的。但是上线后才发现了一些问题，原来还是有一些要优化改进的地方...

Caicloud 2019-08-20 10:28 评论0 收藏0
webpack 基础与项目优化实践总结

摘要：前言本文基于，主要涉及基本概念基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行优化配置。同一文件中，修改某个影响其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行...

Scorpion 2019-08-23 18:15 评论0 收藏0
【Vue项目总结】webpack常规打包优化方案

摘要：由于新建项目发版打包时间大概需要分钟，发版时严重拖慢下班时间，所以特意查看了相关文档来优化打包速度，争取早点下班，。分析打包文件要优化，先分析。由于新建项目发版打包时间大概需要30分钟，发版时严重拖慢下班时间，所以特意查看了相关文档来优化打包速度，争取早点下班，^_^。分析打包文件要优化，先分析。我们先要知道到底是哪里拖慢我们的打包速度呢？打包后生成文件分析可以利用webpa...

andong777 2019-08-23 17:59 评论0 收藏0