摘要：
1. 开发环境性能优化 1.1 优化打包构建速度 1.1.1 HMR https://www.cnblogs.com/PHY01/p/15654771.html 1.2 优化代码调试 1.2.1 source-map https://www.cnblogs.com/PHY01/p/15654780. 阅读全文
摘要：
npm i -D thread-loader 和babel-loader一块使用 thread-loader可以放在需要多线程处理的loader的最上方，最后执行 开启多线程打包，进程启动大概600ms，进程通信也要开销，因此，只有工作消耗时间比较长，才需要多线程打包。 use: [{ loader 阅读全文
摘要：
渐进式网络开发应用程序（离线可访问） npm i -D workbox-webpack-plugin const WorkboxPlugin = require('workbox-webpack-plugin'); ...... plugins:[ new WorkboxPlugin.Generat 阅读全文
摘要：
将打包一个chunk文件分成多个文件，可以实现各项功能，实现按需加载。（多个js文件并行加载，速度更快） 方式一：多入口 （不常用） //多入口，webpack后会生成对应个chunk文件 entry:{ index:'./src/js/index.js', test:'./src/js/test. 阅读全文
摘要：
懒加载：当文件需要使用时才加载 预加载：会在使用之前，提前加载js文件（等其他资源加载完毕，浏览器空闲了，在偷偷加载资源，适用于pc端）兼容性问题严重，caniuse查看是否使用该技术 扩展：正常加载可以认为是并行加载（同一时间加载多个文件） //test.js console.log('tes 阅读全文
摘要：
使用dll技术，对某些库（第三方库：jquery，react，vue...）进行单独打包，仅打包一次 新建webpack.dll.js文件，该文件用于配置需要单独打包的库 const { resolve, join } = require("path"); const webpack = requi 阅读全文
摘要：
source-map [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map 一种提供源代码到构建后代码映射技术（如果构建后代码出错，通过映射可以追踪源代码错位） 1、使用：devtool:'source-map' 1）devto 阅读全文
摘要：
HMR(hot module replacement热模块替换) 一个模块发生变化，只会重新打包这一个模块，极大提升构建速度。 启用HRM 更新 webpack-dev-server 配置， 然后使用 webpack 内置的 HMR 插件。 devServer: { // 开启HMR功能 // 修改 阅读全文