webpack常见优化方案

概念

webpack可以看做是模块打包机。它通过分析项目结构,找到 js、css、图片等模块或资源,并将其打包为合适的格式以供浏览器使用。

功能

  • 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
  • 文件优化/压缩:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。
  • 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。
    等等...

webpack4主要变化

read more
Web前端

代码质量管理——如何写出优雅的代码

好好写代码

作为一个刚写代码不久的小菜鸟,工作的半年多让我越发意识到提高代码质量的重要性。从前只会关注实现功能,慢慢的开始关注性能,现阶段则发现其实还有很多细节也是(如可读性、易用性、可维护性、一致性)提高代码质量的关键。“实现功能”跟“优雅地实现功能”是两码事。

大部分归纳自网络,将多篇文章的观点汇总加工了一下,也融合了一些个人的见解。

原则

  • 单一职责原则
  • 易用性原则
  • 可读性原则
  • 复杂性守恒原则:无论你怎么写代码,复杂性都是不会消失的

    注:如果逻辑很复杂,那么代码看起来就应该是复杂的。如果逻辑很简单,代码看起来就应该是简单的。

read more
Web前端

永不消失的遮罩:鲜为人知的 Context 大坑

这是一个令人费解的遮罩问题,经过各种调试与查阅资料后,发现由 z-index 一路牵扯到 Stacking Context,浑水竟然如此之深...

永不消失的遮罩

众所周知,z-index这货能控制元素的层级,遵循近大远小、后来居上的规则,可以把元素举高高或者打入幕后。
比如在做各种浮层/层叠定位的时候,拿来用一用。

read more
Web前端

快应用初探

快应用

快应用官网

什么是快应用

  1. 快应用是十大手机厂商基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定。

  2. 快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台,以平台化的生态模式对个人开发者和企业开发者全品类开放。

  3. 快应用具备传统APP完整的应用体验,无需安装即点即用,享受原生应用的性能体验。

十大手机厂商

read more
Web前端

webpack4.0新版本变化

官方链接webpack4.0

大改动

  • 环境
    • 不再支持Nodejs 4。源代码已经更新到一个较高的ECMAscript版本。
  • 用法
    • 现在必须选择在 production 或 development 这两种模式中选择一种,参数 mode--mode
      • production 模式会生成最优化的包(bundles)
      • development 模式开放注释和提示,并开启eval devtool功能
      • production 模式不支持监听模式,development 模式拥有更快速的增量构建
      • production 模式也可以把多个模块打包,Scope Hoisting(作用域提升)
      • 可以通过optimization.* 的方式去设定更详细的配置(搭建你的自定义模式)
      • process.env.NODE_ENV 变量已经在 production 和 development 两种模式中被设置了(只在构建的代码里面,不在配置里)
      • 有一种隐藏none模式可以禁用所有内容
  • 语法
    • import() 总是返回一个带命名空间的对象。CommonJS模块会被包在export default 中。
      • 如果使用import()的方式去导入你的CommonJS模块,这可能会破坏你的代码
  • 配置
    • 您不再需要使用这些插件:
      • NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors(production模式默认开启)
      • ModuleConcatenationPlugin -> optimization.concatenateModules(production模式默认开启)
      • NamedModulesPlugin -> optimization.namedModules(development模式默认开启)
    • CommonsChunkPlugin 已经移除 -> optimization.splitChunksoptimization.runtimeChunk
  • JSON
    • webpack现在能处理原生的JSON
      • 当需要通过 loader 去把 json 转换成 js 的时候,你可能需要添加type:"javascript/auto"
      • 不使用 loader 也可以直接使用 JSON
    • 允许通过ESM语法导入JSON
      • 未使用的JSON模块导出后会消除
  • 优化
    • 更新 uglifyjs-webpack-plugin 到 v1
      • ES2015支持

大功能

  • 模块

    • webpack 现在支持下面的模块类型:
      • javascript/auto: (webpack 3 默认值) 所有的 JS 模块规范都可用:CommonJS,AMD,ESM
      • javascript/esm :EcmaScript 模块规范,其它的模块规范都不可用 (.mjs 文件的默认值)
      • javascript/dynamic: 仅支持 CommonJS 和 AMD,EcmaScript 模块规范不可用
      • json: JSON 数据,使用 require 和 import 导入 JSON 数据时可用 (.json 文件的默认值)
      • webassembly/experimental: WebAssembly 模块(当前还是实验版本)
    • javascript/esm 处理 ESM 时候会比 javascript/auto 更加严格。
      • 模块导入进来的名字,必须要在模块中存在。
      • 动态模块(非esm,比如CommonJS)只能通过 default导入,其他所有的方式(包括命名空间的导入)都会报错。
    • .mjs的模块里面将默认使用javascript/esm模式
    • WebAssembly模块
      • 可以导入其他模块(JS和WASM)
      • 从WebAssembly导出的模块会经过ESM导入验证
        • 当你从WASM的导出内容里面尝试导入一个不存在的内容的时候将会活动的警告/错误提示。
      • 只能用在异步加载chunk里面,在初始化的chunk里面不能正常工作(对页面性能影响很大)。
        • 通过import()的方式去导入WASM模块
  • 优化

    • sideEffects: false 现在已经支持在 package.json 里面使用

      • package.json里面sideEffect允许使用glob表达式和glob表达式数组
    • JSONP数组已经代替JSONP函数使用 -> 异步脚本标记支持, 顺序不再重要。

    • 添加新的选项optimization.splitChunks
      Details: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
    • webpack自身移除了废弃的分支代码
      • 之前:Uglify移除掉不用的代码
      • 现在: webpack移除掉不用的代码(相同情况下)
      • 当遇到废弃的分支代码里面含有import()将会停止移除操作。
  • 语法
    • import() 支持黑科技般的注释: webpackIncludewebpackExclude
      他们允许你在使用动态表达式导入的时候过滤掉一些文件。
    • 使用System.import()将会提示警告
      • 你可以通过Rule.parser.system:true关闭掉这些警告
      • 你可以通过Rule.parser.sustem:false来禁用System.import
  • 配置
    • 可以通过module.rules[].resolve来配置解析方式。这将会跟全局的配置合并到一起。
    • optimization.minimize已经被添加到配置里面,通过其开关最小化/压缩功能。
      • 默认在production模式中开启,默认在development模式中关闭
    • optimization.minimizer已经被添加到配置里面,通过其去设置压缩处理程序和选项。
  • 使用
    • 一些插件的选项已经失效
    • CLI已经迁移到了webpack-cli,你需要安装webpack-cli才能使用CLI
    • ProgressPlugin插件 (--progress) 现在会打印显示插件的名字
      • 至少对已经迁移到新插件系统的插件来说
  • 性能
    • UglifyJs现在默认缓存和并行化
    • 许多的性能提升,尤其是更快的增量构建
    • RemoveParentModulesPlugin的性能提升
  • Stats
    • Stats现在会在有串联的模块中打印显示层级嵌套
read more
默认分类

Node.js 8 中的重要新特性及优化

Node.js 8是下一个进入长期支持(LTS)的发行版。 这将于2017年10月发生。 一旦Node.js 8转换到LTS,它的代号将变为Carbon。

官方介绍 node 8.0.0

  • Async Hooks API 简介
    • Async Hooks API 如何在 Node.js 8 中工作的?
  • N-API 简介
  • Node 8 中 Buffer 安全性的改进
  • Pending Deprecations
  • 提升对Promises的支持
  • Console 的改变
  • 静态错误码
  • 重定向过程警告
  • Stream API 改进
  • Debugger 的改变
  • 实验性的检查器 JavaScript API
  • 将V8升级到5.8:为 TurboFan 和Ingnition 做准备
  • npm 升级到 5.0.0
  • WHATWG URL parser
  • Node.js 8中的其他显着变化
    • 异步钩子Async Hooks
    • 缓冲区Buffer
    • Child Process
    • Console
    • Dependencies
    • Domains
    • Errors
    • File System
    • HTTP
    • Lib
    • N-API
    • Process
    • REPL
    • Stream
    • TLS
    • URL

Async Hooks API 简介

Async Hooks(以前称为 AsyncWrap )API允许您获取有关句柄对象生命周期的结构跟踪信息。

read more
Node.js

善用PHPStorm及Sublime,将代码实时同步到远程开发机

  1. 苦于PHP的本地开发环境搭建成本(微服务架构,你懂得),及可视化IDE转VIM的学习成本(其实是尝试了一周放弃了)的两个背景,要在本地使用IDE开发,就得想办法把本地代码实时同步到远程开发机了
  2. 仅供IDE入门者查阅,Vim党可以绕道哈

一、准备

本文主要介绍在PHPStrom或Sublime开发环境下,通过SFTP协议(比如:Linux下的SCP命令)同步文件的方法;当然了,其他的协议比如FTP协议,也可以依葫芦画瓢。

在开始之前,确保已经完成了:

  1. 开发机开放了22端口,且本地可访问(可通过telnet ${开发机IP} 22监测);
  2. 本地与开发环境建立了信任关系
read more
默认分类

[转]Rem布局的原理解析

面试中发现很多人对rem布局的原理不是很清楚,只停留在会使用的阶段,或者理解完全是错误的,本文将给大家讲清楚rem布局的原理,使用方案等知识

什么是Rem

rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下em

em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小——MDN

我在面试时经常问会一道和em有关的题,来看一下面试者对css细节的了解程度,如下,问s1、s2、s5、s6的font-sizeline-height分别是多少px,先来想一想,结尾处有答案和解释

read more
Node.js