Stephy_Yy

优化构建速度 优化产出体积 WDS Webpack DevServer HMR Hot Module Replacement Live Reloading 自动刷新 vue：HMR 性能优化主要是对开发环境而言的，因为生产一般只构建一次 文件内容不变，计算的hash值就不变，可以利用浏览器缓存加快速度 1. 优化babel-loader 适用于开发/生产环境 { test: /\.js$/, use: { loader: 'babel-loader', ..

懒加载 lazy loading 用到的时候才加载 vue 首屏不加载 index.js const oBtn = document.getElementById('j-button') oBtn.onclick = async function () { const div = await createElement() document.body.appendChild(div) } async function createElement() { const { defau

源代码index.js里包含2部分 ① 业务逻辑代码 1mb ② 引入（如lodash包）的代码 1mb 若更新了业务逻辑代码，但在浏览器运行时每次都下载2mb的index.js显然不合理，第三方包是不会变的

Tree Shaking 生产环境去除没有使用到的内容（开发环境没有删除，会影响调试） 只支持ESM规范（静态引入，编译时引入），不支持CJS（动态引入，执行时引入） // webpack.config.js // 和devServer同级 // 开发环境会自动加上，可不写 optimization:{ usedExports: true } 由于@babel/polyfill并没有export而是在window上挂载，因此不应当检查shaking 对于没有导出内容的都应该忽略 // packa

webpack.config.js 该文件若有更新，需要重启 /* * @Author: your name * @Date: 2021-04-18 15:44:29 * @LastEditTime: 2021-08-08 17:58:22 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \newToDoc:\hyy\webpack\webpack.config