Evengod

2022年9月9日

摘要： externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。这里是排除 jQuery的打包。 1. 阅读全文

posted @ 2022-09-09 10:41 Evengod 阅读(609) 评论(0) 推荐(0) 编辑

webpack优化环境配置 - 26.多进程打包

摘要： thread-loader: 把这个 loader 放置在其他 loader 之前，放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行开启多进程打包。进程启动大概为600ms，进程通信也有开销。只有工作消耗时间比较长，才需要多进阅读全文

posted @ 2022-09-09 10:22 Evengod 阅读(177) 评论(0) 推荐(0) 编辑

2022年9月8日

webpack优化环境配置 - 25.pwa

摘要： PWA: 渐进式网络开发应用程序(离线可访问) workbox --> workbox-webpack-plugin 1.文件结构 2.代码 index.css html,body{ margin: 0; padding: 0; height: 100%; background-color: sky 阅读全文

posted @ 2022-09-08 18:28 Evengod 阅读(50) 评论(0) 推荐(0) 编辑

webpack优化环境配置 - 24.lazy loading

摘要： //懒加载: 当文件需要时才加载~//预加载: prefetch: 会在使用之前，提前加载js文件 (webpackPrefetch: true) //正常加载可以认为是并行加载(同一时间加载多个文件)。// 预加载: prefetch: 等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。(但是兼容阅读全文

posted @ 2022-09-08 18:22 Evengod 阅读(39) 评论(0) 推荐(0) 编辑

webpack优化环境配置 - 23.code split(3)

摘要： 1.文件结构 2.代码 index.js function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } /* * 通过js代码，让某个文件被单独打包成一个chunk * import 动态导入语法: 能将某个文件单独打包 * */ / 阅读全文

posted @ 2022-09-08 18:14 Evengod 阅读(18) 评论(0) 推荐(0) 编辑

webpack优化环境配置 - 23.code split(2)

摘要： 1.文件结构 2.代码 import $ from 'jquery' function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(sum(1, 2, 3 阅读全文

posted @ 2022-09-08 18:06 Evengod 阅读(20) 评论(0) 推荐(0) 编辑

webpack优化环境配置 - 23.code split(1)

摘要： 1.文件结构 2.代码 index.js import { mul } from './test'; function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console 阅读全文

posted @ 2022-09-08 18:02 Evengod 阅读(18) 评论(0) 推荐(0) 编辑

webpack优化环境配置 - 22.tree shaking

摘要： tree shaking：去除无用代码前提：1. 必须使用ES6模块化 2. 开启 production 环境作用: 减少代码体积在package.json中配置 "sideEffects": false 所有代码都没有副作用（都可以进行tree shaking）问题：可能会把css / @ 阅读全文

posted @ 2022-09-08 17:40 Evengod 阅读(253) 评论(0) 推荐(0) 编辑

webpack优化环境配置 - 21.缓存

摘要：缓存： babel缓存 cacheDirectory: true --> 让第二次打包构建速度更快文件资源缓存 hash: 每次wepack构建时会生成一个唯一的hash值。问题: 因为js和css同时使用一个hash值。如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件） chunk 阅读全文

posted @ 2022-09-08 17:25 Evengod 阅读(258) 评论(0) 推荐(0) 编辑

webpack优化环境配置 - 20.oneOf

摘要： oneOf的作用提升构建速度，避免每个文件都被所有loader过一遍，因为任何一个文件，构建过程中，在遇到第一个与之对应的loader后，不会再往下进行。在webpack.config.js 中配置 oneOf 1.文件结构 2.代码 webpack.config.js const {resol 阅读全文

posted @ 2022-09-08 16:47 Evengod 阅读(183) 评论(0) 推荐(0) 编辑

公告