随笔分类 -  webpack生产系列教程

webpack生产系列教程
webpack打包优化的几种手段
摘要:webpack打包优化的几种手段 目录 1. noParse 2. 包含和排除目录 3. IgnorePlugin 4. happypack 5. DllPlugin动态链接库 6. 热更新 7. 开发环境 tree-shaking 8. 抽离公共代码 9. 懒加载 1. noParse 作用主要是 阅读全文

posted @ 2023-01-02 22:05 漫思 阅读(213) 评论(0) 推荐(0) 编辑

webpack4.15.1 学习笔记(九) — 11个基础的插件使用
摘要:webpack4.15.1 学习笔记(九) — 11个基础的插件使用 目录 html-webpack-plugin clean-webpack-plugin webpack-manifest-plugin HotModuleReplacementPlugin(内置) mini-css-extract 阅读全文

posted @ 2023-01-02 22:05 漫思 阅读(47) 评论(0) 推荐(0) 编辑

webpack4.15.1 学习笔记(八) — 缓存(Caching)
摘要:目录 输出文件名(Output Filenames) 缓存第三方库 将 js 文件放到一个文件夹中 webpack 打包模块化后的应用程序,会生成一个可部署的 /dist目录,只要 /dist 目录中的内容部署到 server 上,client(通常是浏览器)就能够访问此 server 的网站及其资 阅读全文

posted @ 2023-01-02 22:04 漫思 阅读(56) 评论(0) 推荐(0) 编辑

webpack4.15.1 学习笔记(七) — 懒加载(Lazy Loading)
摘要:懒加载或者按需加载,是一种很好的优化网页或应用的方式。实际上是先把代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。 在代码拆分的例子基础上,会在脚本运行时产生一个分离的 阅读全文

posted @ 2023-01-02 22:03 漫思 阅读(84) 评论(0) 推荐(0) 编辑

webpack4.15.1 学习笔记(六) — 代码拆分(Code Splitting)
摘要:webpack4.15.1 学习笔记(六) — 代码拆分(Code Splitting) 目录 入口起点 防止重复 动态导入(dynamic imports) 代码拆分能够将代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码拆分可以用于获取更小的 bundle,以及控制资源 阅读全文

posted @ 2023-01-02 22:02 漫思 阅读(44) 评论(0) 推荐(0) 编辑

webpack4.15.1 学习笔记(五) — 生产环境构建
摘要:webpack4.15.1 学习笔记(五) — 生产环境构建 目录 生产环境构建 指定环境 生产环境构建 development和production的构建目标差异很大。dev中,需要具有实时重新加载或HMR能力的 source map 和 server。而在prod中目标则关注更小的 bundle 阅读全文

posted @ 2023-01-02 22:02 漫思 阅读(15) 评论(0) 推荐(0) 编辑

webpack4.15.1 学习笔记(四) — Tree shaking
摘要:webpack4.15.1 学习笔记(四) — Tree shaking 目录 Tree shaking 原理 标记效果 副作用代码不可被删除 如何实现 Tree shaking 的几种方法 总结 Tree shaking 本质上为了消除无用的js代码,减少加载文件体积的方式,使其整体执行时间更短。 阅读全文

posted @ 2023-01-02 22:01 漫思 阅读(28) 评论(0) 推荐(0) 编辑

webpack4.15.1 学习笔记(三) — 模块热替换HMR
摘要:目录 模块热替换 HMR HMR监听文件变化 HMR 修改样式表 模块热替换 HMR 允许在运行时更新各种模块,而无需进行完全刷新。不适用于生产环境,意味着应当只在开发环境使用。启用HMR实际上就是更新 webpack-dev-server的配置,及使用 webpack 内置的 HMR 插件。web 阅读全文

posted @ 2023-01-02 22:00 漫思 阅读(19) 评论(0) 推荐(0) 编辑

webpack4.15.1 学习笔记(二) — 配置及开发环境构建
摘要:目录 基本安装 配置文件 管理资源 管理输出 构建一个开发环境 使用 source map 选择一个开发工具 观察模式 webpack-dev-server webpack-dev-middleware webpack 用于编译 JavaScript 模块。安装完成,就可以通过 webpack 的 阅读全文

posted @ 2023-01-02 21:59 漫思 阅读(12) 评论(0) 推荐(0) 编辑

webpack4.15.1 学习笔记(一) — 基本概念
摘要:入口(entry) 出口(output) 加载器 Loaders 插件 Plugins 模式 webpack.config.js 配置 终终终终于下定决心,对你下手了,系统的学习一下。 webpack是一个应用程序的静态模块打包器(module bundler)。处理应用程序时,会递归地构建一个依赖 阅读全文

posted @ 2023-01-02 21:58 漫思 阅读(20) 评论(0) 推荐(0) 编辑

Webpack3.x升级至 4.x 小记
摘要:Webpack3.x升级至 4.x 小记 近期项目部署遇到点问题,需要升级webpack版本,特此整理一小记,记录升级过程中的依赖包及报错处理。 本次升级的依赖包及对应版本对照表: npm 包当前版本升级版本S/D vue ^2.5.18 ^2.6.14 -S element-ui ^2.4.11 阅读全文

posted @ 2023-01-02 21:56 漫思 阅读(163) 评论(0) 推荐(0) 编辑

webpack性能优化方式之dll--- webpack.dll.config.js
摘要:通常来说,我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理,每次构建时都需要把所有的代码重新构建一次,耗费大量的时间。然后大部分情况下,很多第三方库的代码并不会发生变更(除非是版本升级),因此Webpack 打包时,对于一些不经常更新的第三方库,比如 vue、vue-router,vu 阅读全文

posted @ 2023-01-02 21:56 漫思 阅读(146) 评论(0) 推荐(0) 编辑

Webpack入门
摘要:Webpack入门 一、什么是WebPack,为什么要使用它? 模块打包机:分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(less,Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。可以使复杂的程序细化成为各个小的文件,为了简化开发 阅读全文

posted @ 2023-01-02 21:55 漫思 阅读(18) 评论(0) 推荐(0) 编辑

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示