mkdir全拼
webpack的代码分割的两种⽅式(底层⽤的是splitChunkPlugin)多线程下载器推荐
1.同步代码:只需要在webpackmon.js 中修改
optimization的配置
2.异步代码:⽆需配置 会⾃动分割
异步加载包的前⾯加上魔法注释给加载的⽂件起名字
官⽹有默认的splitChunkPlugin的配置
minChunk:2 //⾄少有2个及以上chunk使⽤这个依赖的时候才对依赖单独分割
懒加载: 通过import异步引⼊模块 只有在需要的时候才会引⼊响应模块
import(''').then()...jquery下载文件请求
可⽤ --Profill -json > **.json把打包过程⽣成⼀个⽂件 之后⽤webpack analyze分析
prefetching和preloading
提⾼效率 不⽌是提⾼后⾯的 ⾸次速度需要提升就需要提⾼代码利⽤率 可在浏览器的coverage看代码利⽤率
使⽤异步引⼊代码提⾼代码利⽤率(如 登录注册的弹窗⾸屏的时候不加载 可提⾼⾸屏加载效率)
区别:
prefetch会等主进程空闲之后去加载异步模块 ⽽不是⾸屏或者满⾜加载条件的时候(魔法注释 /webpackPrefetch:true/)
preloading会和主下载进程⼀起下载 (不好)
filename和chunkfilename区别就是 chunkfilename是间接使⽤的模块使⽤
CSS分割:
使⽤minicssExtractplugin(只能线上使⽤)
不⽤style.loader⽽是使⽤minicssExtractplugin.loader 不是把CSS和JS打包在⼀起 ⼆⼗单独拿出来 可默认合并多个CSS⼀起 可⽤插件压缩CSS⽂件
webpack和浏览器缓存
浏览器刷新的加载机制, ⽂件名字不变的时候则不会重新加载
所以需要再打包输出的⽂件加上contentHash(这个值是⽂件内容不变的时候值不变 ,⽂件内容变了值就变了 浏览器就会重新下载了)filename:[name].[contentHash].js
fileChunkName:[name].[contentHash].js
webpack.ProvidePlugin({
'就在库⾥⾯引⼊
import $ from 'jquery'
如果⾃⼰写库(library) 别⼈在引⽤的时候有多种引⽤⽅式, 则在output⾥⾯配置
library: ‘library’, script⽅式引⼊
libraryTarget:‘umd’ //各种引⽤⽅式通⽤ 如果是this 就不知道UMD 但是会在全局的this上挂载library 通过script引⼊的时候通过this.library去获取
linux判断文件是否存在脚本在html中表示页面背景的是库使⽤lodash时候配置 以免 ⽤户同时引⼊lodash 重复
配置external:【'lodash'】 //相关配置查看官⽹
打包后的JS给别⼈使⽤
在package.json⾥⾯的main:"./dist.library.js"
接下⾥注册npm账号 然后百度吧。。。。
PWA(Progressive Web App)
⽐如线上环境下 加⼊⽤户断⽹ 依然可以访问之前加载的⽹页
使⽤插件 workBoxPlugin进⾏配置
webpackDevServer 实现请求转发
devServer的proxy可以实现转发 还可以配置⼀个临时的请求路径
星怎么关闭debugtooltipbrowserRouter
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论