webpack
13篇文章 · 0订阅
  • 使用 Webpack 分包策略，提升应用性能
    当搭建的应用注重用户打开速度时，合理的分包策略有助于减少用户首屏加载应用时加载的资源数量，并且对于部分资源可以复用，避免重复加载，从而提升用户体验。
    Webpack Vue.js
  • splitChunk算法源码分析
    最近在学习webpack代码分割时，发现网上很多资料讲的都是splitChunk是如何使用的。本文章主要从splitChunk源码分析，学习splitChunk设计思想。 1、默认情况下maxInitialRequests=3，index页面已经有（vendors~demo~i…
    Webpack
  • Webpack4散记（4）JS和CSS的打包优化
    以前有个错误认识：以为在webpack配置中，只要设置mode="production"即可以实现代码的压缩。不知道什么时候留下的这个错误印象，可怕。 本文结合splitChunks，记录一下本次对项目打包深度优化的过程。 因为webpack@^5的周边支持还不是很好，之前写插…
    Webpack
  • webpack打包多页面，怎么按需分chunk
    前几天，同事在群里问了这么一个问题：一个 vue-cli 启动的项目，使用多页面打包方式，打包出两个应用a和b。a应用引入vant库ipunt组件，b引入vant库list组件。如果把vant打成一个单独的包，里面会既有input也有list，所以a应用加载了它并不需要的lis…
    Webpack
  • Webpack 的 Chunk，想怎么分就怎么分
    想必大家都用过 webpack，也或多或少了解它的原理，但是不知道大家有没有写过 Webpack 的插件呢？ 今天我们就一起来写一个划分 Chunk 的 webpack 插件吧，写完后你会发现想怎么分
    前端 JavaScript Webpack
    Webpack 的 Chunk，想怎么分就怎么分
  • webpack chunk
    前端 webpack entry入口 chunk splitchunk code splitting 代码分割
    前端 Webpack
    webpack chunk
  • Webpack 理解 Chunk
    希望读过本篇文章，你在看Webpack配置的时候，能在脑中形成Chunk的生成过程。 Chunk不同于entry、 output、module这样的概念，它们对应着Webpack配置对象中的一个字段，Chunk没有单独的配置字段，但是这个词出现在CommonsChunkPlug…
    Webpack
  • webpack chunk相关分享
    development 模式下，默认开启了NamedChunksPlugin 和NamedModulesPlugin方便调试，提供了更完整的错误信息，更快的重新编译的速度。 production 模式下，由于提供了splitChunks和minimize，所以基本零配置，代码就…
    前端
  • 『Webpack系列』—— 路由懒加载的原理
    说起路由懒加载，大家很快就知道怎么实现它，但是问到路由懒加载的原理，怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载，最常用的是通过import()来实现它。 然后通过Webpack编译打包后，会把每个路由组件的代码分割…
    Webpack
    『Webpack系列』—— 路由懒加载的原理
  • 如何实现一个Plugin机制
    对于一些较复杂的项目，插件化的开发方式，可以让我们的项目更加灵活，同时极高的增加项目的可维护性。我们常用的`Webpack`、`Rollup`等都存在`Plugins`机制的设计思想。通过定义好生命周
    JavaScript Webpack
    如何实现一个Plugin机制