前端优化之webpack

由于前端的快速发展，相关工具的发展速度也是相当迅猛，各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目，也正式因为这个原因，我们对于脚手架中最关键的一环webpack相关的优化知之甚少，脚手架基本上已经为我们做好了相关的开发准备，但是当我们想要做一些定制化的优化操作时，对webpack的优化也需要有一定的了解，否则无从下手，接下来就让我们进入webpack的优化世界

构建速度提升

loader提升

loader是webpack中最重要的特性，由于webpack自身只支持JavaScript，因此需要一系列的loader来处理那些非JavaScript模块，因此在我们用webpack建项目的时候一定会使用一系列的loader，例如：vue-loader、sass-loader、babel-loader等等，就以babel-loader为例，来看具体配置：

对于loader来说最常用的就是exclude属性，用来避免不必要的转译，上面通过exclude来避免对node_modules中js中进行转译来提升构建速度，但是这样带来的提升效果有限。

cacheDirectory是对babel-loader的转译结果进行缓存，之后的webpack进行构建时，都会去尝试读取缓存来避免高耗能的babel重新转译过程，cacheDirectory可以指定一个缓存目录或者指定为true，为true时将使用默认的缓存目录node_modules/.cache/babel-loader。

babel对一些公共方法使用了非常小的辅助代码，默认会注入到每一个需要的文件，这样就造成重复引入，这时候就需要像上面那样引入transform-runtime来告诉babel引入runtime来代替注入
第三方库优化

externals

externals提高构建速度的方法就是在构建时不会将指定的依赖包打包到bundle中，而是在运行时再从外部获取依赖，具体是怎么用的呢？来看个例子：

上面的例子的将vue全家桶都配置在externals中，然后将压缩包合成一个js文件放在cdn上面，这样就不会在构建时将文件打包到bundle中，提升打包速度，同时cdn又可以做缓存，提高访问速度

DllPlugin

DllPlugin是用来干什么的呢？DllPlugin会将第三方包到一个单独文件，并且生成一个映射的json文件，打包的生成的文件就是一个依赖库，这个依赖不会随着你的业务代码改变而被重新打包，只有当它自身依赖的包发生变化时才会需要重新打包依赖库，接下来来看具体配置吧：

首先我们需要一个如上面例子那样的dll配置文件，然后编译这个配置文件，生成一个vendor.js和一个映射文件vendor-manifest.json，然后再在我们的webpack配置文件中对进行配置：

happypack

happypack这是个什么呢？我们都知道webpack是个单线程处理任务的，当又多个任务需要处理的时候，需要排队，那happypack就是用多线程来处理任务，通过并发处理来提高任务处理速度，那么这个需要怎么配置呢？来看具体例子：

减小构建体积

按需加载(import)

这里的import是指webpack中的动态加载，它的语法和ES6中的动态加载语法一摸一样，这是官方推荐的按需加载的方式，还是上面tree shaking的例子，我们只想引入plus方法，我们来看具体怎么使用：

我们只需要将入口文件改成上面的形式，其他的都不要变就可以实现按需引入，是不是很简单呢？在vue中路由的按需加载也可以这么用，来看一个简单的例子：

传入一个名字，动态引入对应目录的下的视图文件，这只是一个简单的例子，具体的使用形式还是依据具体的场景

前端优化之webpack相关推荐

前端工程化之Webpack优化
你能所学到的知识点 1.Webpack Loader 和 Plugin 的区别 2.Webpack 生命周期 3.Webpack编译阶段提效 1.减少执行编译的模块 2.提升单个模块构建的速度 3.并 ...
改善前端优化的有用技巧
改善前端优化的有用技巧 1.缓存JavaScript和CSS样式尽可能少地向服务器发出请求.记得10年前,一个页面上要加载5-6个JS,但理想情况下,你应该有一个JS文件和一个CSS文件,这就足够了 ...
时下最流行前端构建工具Webpack 入门总结
作者:wenjuanrao,腾讯 PCG 前端开发工程师最近梳理了下以前 webpack 的相关开发经验,整理和总结了一份入门笔记,欢迎大家围观和批评指正. 随着 web 应用越来越复杂和庞大,前端 ...
（六）构建优化(揭开webpack性能优化的内幕)
构建优化 webpack的优化配置[了解这些优化配置才敢说会用webpack] Tree-shaking JS压缩作用域提升 Babel的优化配置 webpack的依赖优化 noParse(不解析) ...
前端优化-前端性能优化
最近前端群里的小伙伴问我,老板喊我做前端优化我该怎么去优化呢?.我思考了了一下,提出了以下几点建议- 文章目录一.思考二.可读性优化(不细讲) 1.模块化 2.组件化 3.文件规范 4.commi ...
【前端优化】超详细!带你体验常用的前端优化手段
文章目录前言一.图片懒加载原因判断是否进入可视区方案一: clientHeight.scrollTop 和 offsetTop 方案二:getBoundingClientRect 二.防抖与 ...
前端优化 - 收藏集 - 掘金
如何提升页面渲染效率 - 前端 - 掘金 Web页面的性能我们每天都会浏览很多的Web页面,使用很多基于Web的应用.这些站点看起来既不一样,用途也都各有不同,有在线视频,Social Media, ...
react实现异步插件_react项目优化之webpack
开门见山,由于我们项目的前端只有一个 bundle ,所有代码都在一个js文件里,随着功能不断的堆叠,体积已经到无法忍受的地步了(gzip后即将突破300k),导致首屏的时间不停的涨啊涨,最近一周富裕 ...
【前端提升之---webpack 一】
前端(一) 1.1 前端工程化发展历史前端发展历程 (1995)Brendan Eich发明Javascript -> (2005)Ajax广泛应用 -> (2008)V8引擎发布 -& ...

前端优化之webpack

前端优化之webpack相关推荐

最新文章

热门文章