会员
众包
新闻
博问
AI培训
云市场
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
浪波激泥
浪子回头金不换, 波光艳影激千泥。
博客园
首页
新随笔
联系
订阅
管理
上一页
1
2
3
4
5
6
···
15
下一页
2020年8月3日
13 webpack SSR打包
摘要: 服务端渲染(SSR):核心思想是减少请求 渲染:HTML+CSS+JS+DATA->渲染后的HTML 优势:服务端内网机器拉取数据更快,一个HTML返回所有数据,减少白屏时间,对seo友好 实现思路: 服务端:使用 react-dom/server的 renderToString方法将React组件
阅读全文
posted @ 2020-08-03 17:43 浪波激泥
阅读(67)
评论(0)
推荐(0)
编辑
12 webpack 代码分割,动态import
摘要: 代码分割的意义 使用场景:抽取相同代码到一个共享块,脚本懒加载,使得初始加载代码更小 动态import
阅读全文
posted @ 2020-08-03 00:21 浪波激泥
阅读(146)
评论(0)
推荐(0)
编辑
2020年8月2日
11 webpack tree shaking、ScopeHoisting
摘要: tree shaking 原理: DCE (Elimination) 代码不会被执行,不可到达 代码的执行结果不会被用到 代码只会影响死变量 ScopeHoisting:解决webpack打包产生大量闭包,导致内存开销较大。 跟treeshaking一样,在mode为production默认开启
阅读全文
posted @ 2020-08-02 22:50 浪波激泥
阅读(177)
评论(0)
推荐(0)
编辑
10 webpack提取页面公共资源
摘要: 多个页面中有公共模块 基础库分离 思路:基础包用CDN引入,不打入bundle中,如react,react-dom 方法:html-webpack-externals-plugin , 在配置的同时也需要在html文件中引入 方法:使用webpack4内置的SplitChunksPlugin进行公共
阅读全文
posted @ 2020-08-02 21:56 浪波激泥
阅读(278)
评论(0)
推荐(0)
编辑
2020年7月31日
9.Source map
摘要: JavaScript脚本正变得越来越复杂。大部分源码(尤其是各种函数库和框架)都要经过转换,才能投入生产环境。 常见的源码转换,主要是以下三种情况: (1)压缩,减小体积。比如jQuery 1.9的源码,压缩前是252KB,压缩后是32KB。 (2)多个文件合并,减少HTTP请求数。 (3)其他语言
阅读全文
posted @ 2020-07-31 00:01 浪波激泥
阅读(136)
评论(0)
推荐(0)
编辑
2020年7月30日
8.webpack 资源内联
摘要: 资源内联:将js,css的代码内联到Html代码中去,它可以减少Http网络请求,有利于页面初始化以及css内联可以避免页面闪动等意义 Html内联和js内联 安装 npm i raw-loader@0.5.1 -D 目前0.5版本的比较稳定 在页面中引入 Css内联 多页面应用:每一次跳转,后台都
阅读全文
posted @ 2020-07-30 16:27 浪波激泥
阅读(333)
评论(0)
推荐(0)
编辑
7.webpack 自动清理目录构建产物 、css前缀和px转rem
摘要: 我们在每一次打包都会生产新的文件,如果之前的没有删除,那么就会越来越多,使用clean-webpack-plugin可以做到构建前先自动清理 安装 npm i clean-webpack-plugin 然后添加在plugins css中px单位转rem,适配更多手机,在没有rem之前,为了适配各种移
阅读全文
posted @ 2020-07-30 15:21 浪波激泥
阅读(287)
评论(0)
推荐(0)
编辑
2020年7月29日
6.webpack 代码压缩
摘要: Js压缩在webpack中默认内置了uglifyjs-webpack-plugin ,在打包的时候会自动压缩,不需要专门配置 css压缩 使用 optimize-css-assets-webpack-plugin 插件和预处理器 cssnano npm i cssnano -D npm i opti
阅读全文
posted @ 2020-07-29 17:05 浪波激泥
阅读(243)
评论(0)
推荐(0)
编辑
5.webpack 文件指纹
摘要: 文件指纹:文件打包后会有个文件后缀,主要应用在版本管理 文件指纹生成: JS文件指纹设置,主要在文件打包的output设置filename,使用[ chunkhash] CSS文件使用的是 [ contenthash ],由于一般css文件是在js文件中被打包引用,所以我们可以使用MiniCssEx
阅读全文
posted @ 2020-07-29 15:37 浪波激泥
阅读(233)
评论(0)
推荐(0)
编辑
4.webpack 文件监听和热更新
摘要: 文件监听 在package.json添加下面语句 ,使用npm run watch命令运行即可。监听状态下按下Ctrl +C 可以退出。 watch热更新需要更新文件后手动刷新浏览器 热更新 原理: 在package.json添加下面语句 自启动浏览器 "dev": "webpack-dev-ser
阅读全文
posted @ 2020-07-29 10:38 浪波激泥
阅读(233)
评论(0)
推荐(0)
编辑
上一页
1
2
3
4
5
6
···
15
下一页
公告