![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 73
Delicia_Lani
这个作者很懒,什么都没留下…
展开
-
webpack性能优化详解,你想知道的webpack都在这里
webpack性能优化开发环境性能优化;生产环境性能优化;开发环境性能优化:优化打包构建速度-HMR;优化代码调试-source-map;生产环境性能优化:优化打包构建速度:oneOf;babel缓存;多进程打包;externals;dll;优化代码运行的性能:缓存(hash-chunkhash-contenthash);tree shaking;code split;懒加载/预加载;pwa;...原创 2021-04-12 19:58:20 · 633 阅读 · 4 评论 -
webpack总结
一、什么是webpack?这张图片并不陌生,同时很好地解释了什么是webpack。webpack官方给出的解释是:webpack是一个用于现代JavaScript应用程序的静态模块打包工具。如何理解呢?静态模块?在入口文件中,比如index.js文件中,引入了sass文件,less文件等,其实这些就是静态模块,每个文件都可以看做是一个模块。打包?将静态模块引入文件之后形成代码块,然后做处理--less编译为css等,这个过程叫做打包。二、为什么需要webpack?(1)上述.原创 2021-03-29 18:36:52 · 158 阅读 · 0 评论 -
npm启动项目的时候报错ERROR in node_modules/htmlparser2/lib/index.d.ts(36,10): error TS1005: ‘from‘ expected.
在项目开发过程中,因为升级包,遇到下述问题:经过排查,主要原因是该插件与tyscript的版本不兼容,不支持上述文件下的语句。htmlparser2被升级到了6.0.1,这时所要求的ts版本是4点多,但是本地是3点多,导致不兼容。因此将该插件的版本进行降级,降级为3.9.1版本。...原创 2021-03-17 17:10:08 · 4117 阅读 · 0 评论 -
vue性能优化
目录一、Vue 代码层面的优化1.1、v-if 和 v-show 区分使用场景1.2、computed 和 watch 区分使用场景1.3、v-for 遍历必须为 item 添加 key,且避免同时使用 v-if1.4、长列表性能优化1.5、事件的销毁1.6、图片资源懒加载1.7、路由懒加载1.8、第三方插件的按需引入1.9、优化无限列表性能1....转载 2019-11-21 21:24:51 · 432 阅读 · 0 评论 -
webpack相关点积累
目录谈谈你对webpack的看法webpack的基本功能和工作原理?webpack构建过程webpack打包原理什么是webpack,与gulp,grunt有什么区别什么是entry,output?什么是loader,plugins?什么是bundle,chunk,module?如何自动生成webpack配置?webpack如何配置单页面和多页面的应用...转载 2019-10-26 20:31:26 · 257 阅读 · 0 评论 -
三十分钟掌握Webpack性能优化
目录一、优化构建速度1.1 缩小文件的搜索范围1.2 使用DllPlugin减少基础模块编译次数1.3 使用HappyPack开启多进程Loader转换1.4 使用ParallelUglifyPlugin开启多进程压缩JS文件二、优化开发体验2.1 使用自动刷新2.2 开启模块热替换HMR三、优化输出质量-压缩文件体积3.1 区分环境--减小生产环境代码体积...转载 2019-10-26 20:24:56 · 402 阅读 · 0 评论 -
webpack深入学习
一、webpack可以做哪些事情?代码转换(ES6-ES5,scss/less-css)、文件优化(压缩代码体积,合并文件等)、代码分割(开发多页面应用的时候,实现公共模块的分离)、模块合并(按照功能将多模块合并为一个模块)、自动刷新(热更新)、代码校验、自动发布二、webpack常见配置1.手动修改webpack.config.js文件名称:webpack --config webp...原创 2019-10-24 18:32:37 · 186 阅读 · 0 评论