![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 75
webpack
Stephy_Yy
此人很懒,还是写了点什么
展开
-
Webpack性能优化
优化构建速度 优化产出体积WDS Webpack DevServerHMR Hot Module ReplacementLive Reloading 自动刷新vue:HMR性能优化主要是对开发环境而言的,因为生产一般只构建一次文件内容不变,计算的hash值就不变,可以利用浏览器缓存加快速度1. 优化babel-loader适用于开发/生产环境{ test: /\.js$/, use: { loader: 'babel-loader', ..原创 2021-08-13 06:14:40 · 267 阅读 · 0 评论 -
Webpack进阶(三)
懒加载 lazy loading用到的时候才加载vue 首屏不加载index.jsconst oBtn = document.getElementById('j-button')oBtn.onclick = async function () { const div = await createElement() document.body.appendChild(div)}async function createElement() { const { defau原创 2021-08-10 20:33:20 · 76 阅读 · 0 评论 -
Webpack进阶(二)代码分割 Code Splitting
源代码index.js里包含2部分① 业务逻辑代码 1mb② 引入(如lodash包)的代码 1mb若更新了业务逻辑代码,但在浏览器运行时每次都下载2mb的index.js显然不合理,第三方包是不会变的原创 2021-08-10 06:15:54 · 191 阅读 · 0 评论 -
Webpack进阶(一) tree shaking与不同mode
Tree Shaking生产环境去除没有使用到的内容(开发环境没有删除,会影响调试)只支持ESM规范(静态引入,编译时引入),不支持CJS(动态引入,执行时引入)// webpack.config.js// 和devServer同级// 开发环境会自动加上,可不写optimization:{ usedExports: true}由于@babel/polyfill并没有export而是在window上挂载,因此不应当检查shaking对于没有导出内容的都应该忽略// packa原创 2021-08-08 21:06:10 · 109 阅读 · 0 评论 -
Webpack基础
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原创 2021-08-08 18:00:48 · 192 阅读 · 1 评论