摘要：
这里的知识点就是常说的cdn优化 在webpack(22)的内容,和这个差不多,只是说cdn被本地的包文件替换了 externals: 外部的,用户忽略 npm包 前提: 在index.js中引入jquery包,但是打包的时候,就算引入了还是不会进行打包,所以需要用到 cdn引进来 module.e 阅读全文
摘要：
第一步: npm i thread-loader -D 第二步: module.exports ={ /* 开启多线程打包. 进程启动大概为600ms,进程通信也有开销 只有工作消耗时间比较长,才需要多进程打包 */ module:{ use: [ //'thread-loader' { loade 阅读全文
摘要：
PWA:渐进式网络开发应用程序(离线可访问) workbox > workbox-webpack-plugin 操作步骤 第一步: npm i workbox-webpack-plugin 第二步:在webpack.config.js中使用 const WorkboxWebpackPlugin = 阅读全文
摘要：
懒加载和预加载有什么区别的吗? 懒加载,是在进入这个方法时才加载,文件test进行第一次加载并执行里面的代码 预加载:会在使用之前加载js文件(js文件先加载了,但是并不会去执行代码) 当点击按钮进入该方法时,加载的是该文件的缓存,同时去执行test文件的内容 正常加载: 可以认为是并行加载(同一时 阅读全文
摘要：
第一种方式:单入口和多入口 注: 单入口,只会输出一个文件, 多入口,就会输出多个文件 前提: index.js 引入 print.js文件,若是配置单个入口,就会把两个文件打包成一个文件 index.js引入print.js文件,若是配置多个路口文件,就会把两个文件分别打包成一个文件(共有两文件) 阅读全文
摘要：
开发和生产环境皆可 tree shaking:去除无用代码 前提: 1.必须使用es6模块 2.开启production环境 作用:减少代码体积 在package.json中配置 "sideEffects":false 所有代码都没有副作用(都可以进行tree shaking) 问题: 可能会把cs 阅读全文
摘要：
开发环境和生产环境皆可 缓存的原理是什么? 在之前我们讲到HMR(hot module replacement) 热模块替换很像,若有一个js改动,其他的js文件不需要重新加载,但是HMR只能在devServer环境下,但是生产环境不需要devServer 在第一次的时候,会将之前编译(打包)的文件 阅读全文
摘要：
开发环境和生产环境皆可 oneOf的作用: 以下loader只会匹配一个 比如 这是css文件,在处理后,就不会再往下走 去验证是否是less.js,图片的内容,这样就加快了打包速度 //注意:不能有两个配置处理同一种类型文件 问题:为什么oneOf上面为什么还有一个js的loader处理呢? 因为 阅读全文
摘要：
开发环境和生产环境皆可 source-map: 一种提供源代码到构建后代码映射技术(如果构建后代码出错了,通过映射可以追踪源代码的位置) [inline-|hidden-|eval-] [nosources-] [cheap-[module-]] sourcce-map source-map 外部 阅读全文
摘要：
这里只能对 开发环境有效 1.开发环境性能优化 *优化打包构建速度 (项目体积越来越庞大,代码量太多,就会越来越慢) *优化调试代码 2.生产环境性能优化 *优化打包构建速度 *优化代码运行的性能 HRM是需要在devServer环境下的,而生产环境是没有这个环境的,所以在生产环境无法使用HRM 为 阅读全文
摘要：
未测试,只是记录下来而已 const {resolve} = require('path') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCssAssetsWebpackPlugin = 阅读全文