- 持久化缓存 cache配置 写到本地node_module的.cache文件中
- tree-shaking
- 联邦模块
- 资源模块配置 asset
- URIs
- moduleIds & chunkIds的优化
- 移除nodejs的polyfill
- webpack-bundle-analyzer 进行包分析
- 缩小查找范围
- extensions
- alias
- modules
- mainFiles // 更改包启动的入口文件
- oneOf //当匹配到 rules 中的 loader 时停止往下匹配
- external
- resolveLoader //自定义 loader
- ignorePlugin //忽略某些多余文件的编译
- cache-loader
- thread-loader //启动多线程
- webpack 自带的缓存
- 编译体积优化
- 压缩 js:terser-webpack-plugin
- 压缩 css:css-minimizer-webpack-plugin
- 压缩 html:html-webpack-plugin
- 压缩 image:image-webpack-loader
- 移除无用内容:purgecss-webpack-plugin
- tree-shanking
- webpack5 默认开启 mode 改为 production 即可
- lazyload 懒加载
-
btn.addEventListener("click", () => { import("./src/components/HeadBar/index.js").then((res) => console.log(res) ); });
-
- prefetch 预获取,在浏览器空闲的时候加载,不会抢占浏览器资源 与 preload 不同,preload 优先级较高,一定会加载资源,会与浏览器抢占资源
-
btn.addEventListener("click", () => { import( /* webpackChunkName: 'video , webpackPrefetch: true */ "./src/components/HeadBar/index.js" ).then((res) => console.log(res)); });
-
- mode //开发模块中 process.env.NODE_ENV,配置文件获取不到 process.env.NODE_ENV
- npm i @babel/core @babel/cli @babel/preset-env -D
- .browserslistrc 目标环境
- polyfill
- useBuiltIns: 'usage' 按需引入垫片 但是会污染全局环境
- babel-runtime 按需引入,不会污染全局环境,适合开发工具类库
$ npm i @babel/plugin-transform-runtime @babel/runtime-corejs3 -D
- preset 预设是 plugins 插件的集合 插件会先执行,再执行plugins, 插件是从前往后执行,预设是从后往前执行