浪波激泥

摘要： 服务端渲染（SSR)：核心思想是减少请求 渲染：HTML+CSS+JS+DATA->渲染后的HTML 优势：服务端内网机器拉取数据更快，一个HTML返回所有数据，减少白屏时间，对seo友好 实现思路： 服务端：使用 react-dom/server的 renderToString方法将React组件 阅读全文

摘要： 代码分割的意义 使用场景：抽取相同代码到一个共享块，脚本懒加载，使得初始加载代码更小 动态import 阅读全文

摘要： tree shaking 原理： DCE (Elimination) 代码不会被执行，不可到达 代码的执行结果不会被用到 代码只会影响死变量 ScopeHoisting：解决webpack打包产生大量闭包，导致内存开销较大。 跟treeshaking一样，在mode为production默认开启 阅读全文

摘要： 多个页面中有公共模块 基础库分离 思路：基础包用CDN引入，不打入bundle中，如react，react-dom 方法：html-webpack-externals-plugin ， 在配置的同时也需要在html文件中引入 方法：使用webpack4内置的SplitChunksPlugin进行公共 阅读全文

摘要： JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。 常见的源码转换，主要是以下三种情况： （1）压缩，减小体积。比如jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。 （2）多个文件合并，减少HTTP请求数。 （3）其他语言 阅读全文

摘要： 资源内联：将js，css的代码内联到Html代码中去，它可以减少Http网络请求，有利于页面初始化以及css内联可以避免页面闪动等意义 Html内联和js内联 安装 npm i raw-loader@0.5.1 -D 目前0.5版本的比较稳定 在页面中引入 Css内联 多页面应用：每一次跳转，后台都 阅读全文

摘要： 我们在每一次打包都会生产新的文件，如果之前的没有删除，那么就会越来越多，使用clean-webpack-plugin可以做到构建前先自动清理 安装 npm i clean-webpack-plugin 然后添加在plugins css中px单位转rem,适配更多手机，在没有rem之前，为了适配各种移 阅读全文

摘要： Js压缩在webpack中默认内置了uglifyjs-webpack-plugin ，在打包的时候会自动压缩，不需要专门配置 css压缩 使用 optimize-css-assets-webpack-plugin 插件和预处理器 cssnano npm i cssnano -D npm i opti 阅读全文

摘要： 文件指纹：文件打包后会有个文件后缀，主要应用在版本管理 文件指纹生成： JS文件指纹设置，主要在文件打包的output设置filename，使用[ chunkhash] CSS文件使用的是 [ contenthash ],由于一般css文件是在js文件中被打包引用，所以我们可以使用MiniCssEx 阅读全文

摘要： 文件监听 在package.json添加下面语句 ，使用npm run watch命令运行即可。监听状态下按下Ctrl +C 可以退出。 watch热更新需要更新文件后手动刷新浏览器 热更新 原理： 在package.json添加下面语句 自启动浏览器 "dev": "webpack-dev-ser 阅读全文