自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(3)
  • 收藏
  • 关注

原创 webpack-优化篇(code split)

背景一般来讲,基于webpack的spa应用,如果没有额外配置,所有的js经过打包后都会整合到一个chunk中,这就可能会导致这个chunk的体积过大,用户通过浏览器访问我们应用时就需要花费更多的时间来下载资源为什么我们可以把较大的资源根据实际情况拆分成小的模块,利用http可以并行请求资源的特点,大幅节省下载资源的时间开销合理的代码分割也可以帮我们剔除模块中重复引入的代码(eg:node_modules中的依赖抽离出来单独打包成一个chunk),节省项目体积多页面应用通过分包可以只加

2021-12-22 18:16:46 750

原创 webpack配置gzip压缩的正确使用姿势

背景:vue-cli4搭建的前端项目,在项目vue.config.js文件中配置了如下gzip配置(省略其他无关配置)// vue.config.jsconst IS_PROD = ['prod', 'production'].includes(process.env.NODE_ENV)//gzip压缩const productionGzipExtensions = /\.(js|css|json|html)(\?.*)?$/i; //匹配格式const CompressionWebpackPlu

2021-12-09 16:52:26 4813 2

原创 webpack5.x配置-基础篇

webpack 是什么?本质上,webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。现在开源社区中,与webpack功能相似的有rollup、vite等,在这我做一下简单的介绍Rollup是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序

2021-11-13 10:52:09 988

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除