09 2020 档案
摘要：原理学习 这个过程发生了什么？ 开始:从 webpack 命令行说起 通过 npm scripts 运行 webpack 开发环境: npm run dev 生产环境:npm run build 通过 webpack 直接运行 webpack entry.js bundle.js 查找 webpac
阅读全文
摘要：初级分析:使用 webpack 内置的 stats stats: 构建的统计信息 package.json 中使用 stats "script": { "build:stats": "webpack --env production --json > stats.json" }, Node.js 中
阅读全文
摘要：以后公司前端新项目 webpack 可以选择使用这一套通用配置，该配置满足了一下诸多功能。 使用者可以自己定义一些 loader 以及 plugin 以满足日常开发需要，在下面给出详细的注释以便理解与使用。（开发时可以把注释删掉） - webpack.base.js // webpack.base.
阅读全文
摘要：构建配置抽离成 npm 包的意义 通用性 业务开发者无需关注构建配置 统一团队构建脚本 可维护性 构建配置合理的拆分 README 文档、changeLog 文档等 质量 冒烟测试、单元测试、测试覆盖率 持续集成 构建配置管理的可选方案 通过多个配置文件管理不同环境的构建，webpack --con
阅读全文
摘要：webpack 日志优化 当前构建时的日志显示 展示⼀大堆日志，很多并不需要开发者关注 统计信息 stats Preset Alternative Description "errors-only" none 只在发生错误的时候输出 "minimal" none 只在发生错误或者有新的编译的时候输出
阅读全文
摘要：前端应用服务端渲染 面向消费者、面向用户的前端应用程序，使用 ssr 是很有必要的。 作为消费者，在使用前端应用程序的时候，页面打开过程大概是以下几个步骤。 开始加载（白屏) → HTML 加载成功，开始加载数据（这个时候会有提示，短视频加载中） → 数据加载成功，渲染成功开始， 加载图⽚片资源 →
阅读全文
摘要：代码规范 ESLint 的必要性 2017年4⽉13日，腾讯⾼级⼯程师小明在做充值业务时，修改了苹果 iap ⽀付配置，将 JSON 配置增加了重复的 key 。代码发布后，有小部分使用了 vivo 手机的用户反馈充值页面白屏，无法在 Now app 内进行充值。最后问题定位是: vivo ⼿机使用
阅读全文
摘要：代码分割 代码分割的意义 对于大的 Web 应用来讲，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被使用到。webpack 有一个功能就是把你的代码库分割成 chunks（语块），当代码运行到需要它们的时候再进行加载。 适用的场景 抽离相同代码到一个共享
阅读全文
摘要：webpack 打包闭包优化 现象：构建后的代码存在大量闭包代码 会导致什么问题？ 大量函数闭包包裹代码，导致体积增大（模块越多越明显） 运行代码时创建的函数作用域变多，内存开销变大。 模块转换分析 结论 被 webpack 转换后的模块 会带上一层包裹 import 会被转换成__webpack_
阅读全文
摘要：树摇——性能优化 性能优化的关键步骤，已在 webpack4.0 里默认支持 概念 一个模块可能有多个方法，只要其中的某个⽅法使⽤用到了了，则整个文件都会被打到 bundle ⾥面去，tree shaking 就是只把用到的⽅方法打入 bundle ，没用到的方法会在 uglify 阶段被擦除掉。
阅读全文
摘要：基础库分离 思路路:将 react、react-dom 基础 包通过 cdn 引⼊入，不不打⼊入 bundle 中 ⽅方法:使⽤用 html-webpack- externals-plugin const HtmlWebpackExternalPlugin = require('html-webpa
阅读全文
摘要：使用 source map 来帮助你进行本地开发，算是前端开发利器之一了 使用 source map 作用:通过 source map 定位到源代码 · source map科普⽂文:http://www.ruanyifeng.com/blog/2013/01/javascript_source
阅读全文
摘要：说白了就是使用正则，把对应的 entry 匹配出来，然后对应生成对应的 htmlWebpackPlugins，到最后丢到插件里面。 多页面应用（MPA）概念 每一次页面跳转的时候，后台服务器都会返回一个新的 html 文档。 这种类型的⽹网站也就是多⻚页⽹网站，也叫做多页面应用。 多⻚页⾯面打包基本
阅读全文
摘要：资源内联 webpack 也太迷了 把字体、图片等资源内联到代码里面去 上报相关的一些点，比如 pagestart、css 初始化、css 初始化完成、js初始化、js 初始化完成。 这些都一般内联到 html 里面去，而不是单个文件上报 资源内联的意义 代码层面： 页面框架的初始化脚本 上报相关打
阅读全文
摘要：CSS px to rem 分辨率不同 浏览器的分辨率都是不一样的 过去 在过去，我们都是靠媒体查询来实现响应式布局 这里有个缺陷，就是需要写多套匹配样式的代码 @media screen and (max-width: 980px) { .header { width: 900px; } } @m
阅读全文
摘要：webpack 自动补齐 CSS 样式 autoprefixer 自动补齐 CSS3 前缀 CSS3 的属性为什么需要前缀？ 浏览器标准不统一，目前来看。 举个例子 .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-bo
阅读全文
摘要：自动清理构建目录产物 当前构建时的问题 每次构建的时候都不会清理目录，造成构建的输出目录 output 文件越来越多 rm -rf ./dist && webpack rimraf ./dist && webpack 方法有点笨 自动清理构建目录 避免构建前每次需要手动删除 dist npm ins
阅读全文
摘要：HTML CSS 和 JS 的代码压缩 1. HTML 压缩 html-webpack-plugin，这是一个非常强大的插件 安装 npm install html-webpack-plugin -D 修改 html-webpack-plugin，然后设置压缩参数 "use strict"; //
阅读全文
摘要：文件指纹 什么是文件指纹？ 文件指纹指的是打包后输出的文件名的后缀。 文件指纹如何生成？ Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改。 Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会生成不同的 chunkhash
阅读全文
摘要：1. webpack中的文件监听 文件监听是在发现源码发生变化时，自动重新构建出新的输出文件。 webpack 开启监听模式，有两种方法： 启动 webpack 命令时，带上--watch 参数 在配置 webpack.config.js 中设置 watch：true { "name": "hell
阅读全文
摘要：资源解析 解析 ES6 使用 babel-loader 在项目根目录下安装 babel npm install -D babel-loader @babel/core @babel/preset-env webpack # 我用 npm 没装上 尝试了很多次 # 最后直接用 yarn add 装的
阅读全文
摘要：webpack 核心概念 1. Entry Entry 介绍 Entry 用来指定 webpack 的打包入口 模块打包器 依赖图的入口是 entry 对于非代码来说，比如图片、字体依赖也会不断的加入到依赖图里面。 然后在 webpack 处理以后，就没有依赖了，全部弄成静态的资源。 Entry 的
阅读全文
摘要：1. 为什么需要 webpack 等构建工具？ 转换 ES6 语法 转换 JSX CSS 前缀补全、预处理器 压缩混淆 图片压缩 2. 前端构建演变之路 ant + YUI Tool ⇒ grunt ⇒ fis3 | gulp ⇒ rollup | webpack | parcel 代码混淆曾经是通
阅读全文
摘要：SICP exercise-1.1 Below is a sequence of expressions. What is the result printed by the interpreter in response to each expression? Assume that the se
阅读全文
摘要：SICP exercise-1.1 Below is a sequence of expressions. What is the result printed by the interpreter in response to each expression? Assume that the se
阅读全文
摘要：Linux文件系统 文件系统的类型 普通文件 如文本文件、C语言元代码、SHELL脚本、二进制的可执行文件等，可用cat、less、more、vi、emacs来察看内容，用mv来改名。 目录文件 包括文件名、子目录名及其指针。它是LINUX储存文件名的唯一地方，可用ls列出目录文件。 连接文件 是指
阅读全文
摘要：there are techniques for controlling the complexity of these large systems. 控制复杂度是《代码大全》里面反复强调的技术 First technique, which is used in all of engineering
阅读全文
摘要：提供给 diff 算法，性能优化，防止 bug 不要用 index 了兄弟们 export function uuid() { var i, random; var uuid = ''; for (i = 0; i < 32; i++) { random = Math.random() * 16 |
阅读全文
浙公网安备 33010602011771号