Webpack 2 中一些常见的优化措施

zoomdong 发布于2019-08-20 17:06 / 597人阅读

摘要：所以我们应该分析业务依赖和路由，尽可能将所有组件的公共依赖提取出来。文件分离文件分离主要是将图片和从中分离。在生产环境下，可以考虑将图片和从中分离。

Webpack 2中一些常见的优化措施 分离第三方依赖

在开发环境下, 通常会采取 HMR 模式来提高开发效率. 但一般情况下, 我们只会更改自身的业务文件, 不会去更改第三方的依赖, 但 webpack 在 rebuild 的时候, 依旧会 build 所有的依赖. 因而, 为减少 rebuild 的时间, 我们可以分离第三方依赖, 在项目启动之前, 将其多带带打包和引入.

多进程构建

Webpack的构建过程是单进程的，利用HappyPack可以让loader对文件进行多进程处理，以此加快rebuild速度

提取公共的依赖模块

无论是单页还是多页应用，在生产环境下，通常都会利用CommonsChunkPlugin插件来提供公共的依赖模块。但是这种方式会导致两个问题：1.业务越复杂，第三方依赖会越多，vendor包会越大；2.没有隔离业务路由组件，所有的路由都可能会去加载vendor，但并不是所有的路由组件都会依赖node_module下的所有模块。所以我们应该分析业务依赖和路由，尽可能将所有组件的公共依赖提取出来。

文件分离

文件分离主要是将图片和CSS从js中分离。图片和CSS都是Webpack需要构建的资源，通过某种配置，图片可以以base64的方式混淆在js文件中，这会增加最终的bundle文件的大小。在生产环境下，可以考虑将图片和css从js中分离。

在生产环境下，通过自定义插件，将图片的本地引用替换为CDN的链接

在生产环境下，通过ExtractTextPlugin来提取CSS

资源混淆和压缩

Webpack提供的UgligyJS插件由于采用单线程压缩，速度比较慢，可以使用Prarllel插件进行优化

Gzip压缩

在生产环境下，如果想进一步减少bundle文件的大小，可以使用Gzip压缩

按需加载

在单页应用中，一个应用可能会对应很多路由，每个路由都会对应一个组件；如果将这些组件全部放入一个bundle文件中，会导致最终的bundle文件比较大，因而，我们需要利用Webpack的Code Splitting功能，将代码进行分割，实现路由的按需加载。

参考文章：https://github.com/dwqs/blog/...

云服务器 GPU云服务器优化专线网络的措施 vps日常维护中的一些要点总结 js中常见的变量名称 java的一些代码

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

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

* 请说出静态资源请求的优化措施？是否用过“雪碧图”和iconfont？

摘要：减少请求合并打包小图标等用代替作为单个节点使用，可以设置大小颜色等，非常便利。前后端分离项目，不论是还是，都有相应的工具包。不过，大部分前端对应该陌生一些，为了实践技术，用熟悉的即可，真正的项目部署，有专业的实施人员来搞使用缓存减少HTTP请求 CSS/JS 合并打包小图标等用iconfont代替：作为单个DOM节点使用，可以设置大小、颜色等，非常便利。个人建议前端来维护这个字体包，...

不知名网友 2019-08-30 11:25 评论0 收藏0
拒绝Redux文档“毒害” 一个项目告诉你Redux最新真正哲学

摘要：之前分享过几篇关于技术栈的原创文章解析前端架构学习复杂场景数据设计干货总结打造单页应用一个项目理解最前沿技术栈真谛一个工程实例今天进一步剖析一个实际案例移动网页版。目前面临的问题在于提高产品的各方面性能体验。之前分享过几篇关于React技术栈的原创文章：解析Twitter前端架构学习复杂场景数据设计 React Conf 2017 干货总结1: React + ES next ...

YuboonaZhang 2019-08-22 11:04 评论0 收藏0
Web前端性能优化——如何有效提升静态文件的加载速度

摘要：在减少文件请求数量方面大致有以下三方面合并脚本文件合并样式文件合并引用的图片，使用雪碧图。和的模块管理不同，前者是基于静态的，而后者是动态的。被打包文件的内容也已经被压缩混淆，减少了加载文件的。作者：刘轶斌，腾讯应用开发工程师商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。原文链接：http://wetest.qq.com/lab/view/345.html We...

ccj659 2019-08-06 13:25 评论0 收藏0
vue和react的差异

摘要：而中实现原理是利用高阶函数通过将多个函数组合成一个可执行执行函数关键步骤代码如下所示。和都是基于更新差异元素。引言平时开发单页项目应用基于vue,目前另外两个比较热的库还有angular和react,angular 1系列用过,进入公司后由于基于vue技术栈就没在关注了。一直在关注react,目的不是学习用法,只是为了拓展自己的视野和思维,通过了解一些使用上的差异性,来进一步的思考...

OnlyLing 2019-08-21 17:47 评论0 收藏0