webpack配置以及优化
文章平均质量分 62
项目webpack打包配置
Sunsine_C
前端攻城狮
展开
-
webpack优化系列(11)-dll
dll是什么?类似于externals,指使哪些库是不需要打包的。和externals区别在于 dll 会单独的对某些库进行单独打包,将多个库打包成一个chunk。那么它有什么意义呢?正产情况下一个项目下 node_modules 里面的包会打包成一个chunk,但是第三方库很大,打包成一个chunk文件体积过大。所以通过 dll 将所有库进行单独打包成不同的chunk,更加有利于我们的性能优化,提高构建速度。使用dll技术对某些库(第三方库:jquery,react,vue...)进原创 2021-03-02 19:12:24 · 381 阅读 · 0 评论 -
webpack优化系列(10)-externals
externals作用防止将某一些包打包到我们最终的bundle里面导致包体积变大。场景jquery我们希望通过csdn链接引入使用,不希望打包到最后的bundle里面,为了避免打包的时候将jquery最终也给打包了,可以配置externals,禁止将jquery打包。配置拒绝jQuery打包进到最终的bundle里面, 但是一定要把jquery通过csdn链接引入到html里面。否则打包完后的页面中不能使用jquery// webpack.config.jse原创 2021-03-02 17:14:57 · 250 阅读 · 0 评论 -
webpack优化系列(9)-多进程打包
thread-loader开启多进程打包 进程启动大概600ms,进程通信也有开销,只有工作消耗时间比较长,才需要多进程打包。一般用在babel-loader后面webpack配置如下:module: { rules: [ { test: /\.js$/, use: [{ loader: 'thread-loader', options: { ..原创 2021-03-01 15:47:27 · 389 阅读 · 0 评论 -
webpack优化系列(8)-PWA
PWA是什么?(Progress web apps) 渐进式网络开发应用程序(离线可访问,比如淘宝)。那么webpack中怎么配置实现PWA功能呢?一般使用workbox来实现(谷歌开源的项目)==> workbox --> workbox-webpack-plugin一般设置eslint后构建后会有问题:eslint不认识window、navigator全局变量解决办法:eslintConfig: { env: { browser: true.原创 2021-03-01 15:43:57 · 415 阅读 · 0 评论 -
webpack优化系列(6)-code split
代码分割将我们打包输出的一个文件分割为多个文件。(并行加载,速度更快 、按需加载)主要针对于js代码。方式一:通过修改entry配置多入口,有几个入口输出有几个bundleentry: { index: './src/js/index.js', test: './src/js/test.js'}缺点:修改不太灵活,要改配置。方式二:optimization 1. 单入口应用中可以将node_modules中代码单独打包成一个chun...原创 2021-03-01 15:26:04 · 210 阅读 · 0 评论 -
webpack优化系列(5)-tree-shaking
什么是tree-shaking呢?可以理解为:通过工具"摇"我们的JS文件,将其中用不到的代码"摇"掉,是一个性能优化的范畴。具体的来说,在 前端项目中,webpack配置文件中有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝。实际情况中,虽然依赖了某个模块,但其实只使用其中的某些功能。通过 tree-shaking,将没有使用的模块摇掉,这样来达到删除无用代码的目的。作用去除无用代码,减少代码体积使用tree-shaking的前提必须使用es6模块原创 2021-03-01 15:19:36 · 268 阅读 · 0 评论 -
webpack优化系列(4)-babel缓存 & hash缓存
场景:当有100个js文件,当修改了其中某一个js文件的时候,不可能再把所有的js文件再编译一遍,会影响构建速度,所以这个时候只要实现修改一个js文件只构建那一个文件,其他的99个文件不动。那么这个时候可能会想到用热模块替换(HMR),但是HMR是基于dev-server的,生产环境是不需要dev-server。那么这个时候可以用缓存实现。怎么配置呢? 1、针对js兼容性进行缓存:(babel缓存)babel-loader的options设置中增加cacheDirectory属性..原创 2021-03-01 15:12:23 · 1032 阅读 · 3 评论 -
webpack优化系列(3)-oneOf
正常来讲,一个文件只能被一个loader处理。当一个文件要被多个loader处理,那么一定指定loader执行的先后顺序:比如js文件先执行 eslint 再执行 babel问题:一个文件被所有设置的loader过一遍,当然了,有的loader处理不了,有的loader就命中,这样不太好,那么现在呢就可以用 oneOf 将所有的rules设置包裹进去,表示loader只会匹配一个注意:不能有两个配置处理同一种类型文件。比如:eslint-loader和babel-loader都处理同一种文件类型.原创 2021-03-01 14:50:36 · 720 阅读 · 0 评论 -
webpack优化系列(1)-HMR
webpack优化要做哪些方面呢?开发环境性能优化优化打包构建速度 优化代码调试生产环境性能优化优化打包构建速度 优化代码运行性能(提高用户体验)那么怎么实现优化呢?以下是我的学习,仅供参考~场景一当我们修改样式文件,实际上js文件也被重新打包了。假如项目体积很大,我们修改某一个css文件,那所有的模块都要被重新编译,会导致构建很慢,这个时候我就就要实现改哪个模块的只更新编译对应的模块即可,那么怎么实现呢?这个时候可以用到HMR,下面我们先来了解一下什么是HMR,有什么作用.原创 2020-12-23 19:11:30 · 375 阅读 · 0 评论 -
webpack优化系列(2)-sourceMap
如果构建后代码出错了,要想根据构建后的代码找到源代码哪个地方出错了进行修改,应该怎么实现呢?这个时候就出现了source-map。 source-map:一种提供源代码到构建后代码的映射技术(如果构建后代码出错了,会通过映射关系可以追踪到源代码的错误)那么怎么实现呢?在webpack.config.js中增加配置属性devtooldevtool: 'source-map'那么构建完成后输出目录下会生成一个sourceMap文件(源代码到构建后代码的映射文件)比如:buil...原创 2020-12-24 17:51:47 · 544 阅读 · 3 评论 -
webpak基本配置
webpack是什么?webpack是一个模块打包机,它做的事情是分析你的项目结构,找到js模块以及其它的一些浏览器不能直接运行语言(Scss、less、ts),并将其打包为合适的格式以供浏览器使用。webpack解决什么问题?进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如less编译成css,ES6 语法 转成 ES5等等。减少io请求。通常我们在请求后,会返回一个html到浏览器。这时,我们如果打开控制台,就会发现在html页面通过script,link原创 2020-12-22 17:28:42 · 228 阅读 · 0 评论