Source-map

来自：https://zhuanlan.zhihu.com/p/83291118 1.给RN项目添加 TypeScript yarn add --dev typescript 或者 npm install typescript --save 2.给项目添加 react-native-typescript-transformer 库 yarn add --dev react-native-typescript-transformer 3.初始化 TypeScript 配置文件 yarn tsc --init --pretty --jsx react-native 打开tsconfig.json文件 { "compilerOptions" : { /* Basic Options */ // "incremental": true, /* Enable incremental compilation */ "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ "module": "commonjs", /* Specify module code

Chrome DevTools 小技巧 1.表格视图 console.table(arr2/obj, [arrColName]); // 以列表形式显示对象属性/值或者多维数组键/值 2.计时 console.time/timeEnd(str); // 成对出现，配合使用 3.snippet 可以把自己的调试工具库放进去，非常方便 4.图片取色 用浏览器打开图片，审查元素，设置任意色值，用取色器取色 5.常用快捷键 Ctrl + Shift + f 跨文件查找 Ctrl + Shift + o 查找函数定义 Ctrl + p 转到Sources面板 Ctrl + Shift + c 审查元素 Ctrl + L 跳转到指定行 ESC 显示/不显示console Ctrl + L 清空console 零.主面板 1.常用功能 模拟设备（横屏切换），模拟触摸事件（默认开启） 2.不常用功能 模拟网络（移动网络性能优化），模拟经纬度、加速度，调试媒体查询 二.Elements 1.常用功能 定位，临时修改，查看css规则，事件监听 2.不常用功能 DOM断点 （插入断点，子树更新/属性值更新/节点移除时触发，对应DOM3级节点更新事件），拖放节点修改DOM结构， 强制元素显示hover/active等状态 三.Network 1.网络面板能做什么 哪个资源最晚开始下载？

gzip压缩 gzip压缩效率很高，可以达到70%的压缩率 //npm i -D compression-webpack-plugin 安装插件依赖 configureWebpack: config => { const CompressionPlugin = require ( 'compression-webpack-plugin' ) config.plugins.push( new CompressionPlugin()) } 去掉console.log 生产环境中，不需要打印日志。通过对webpack进行配置，打包时自动去掉console.log //npm i -D terser-webpack-plugin configureWebpack: config => { const TerserPlugin = require ( 'terser-webpack-pulugin' ) config.optimzation.minimizer.push( new TerserPlugin({ extractComments : false , terserOptions :{ compress :{ drop_console : true }} //插件配置项 移除console }) ) } 去除SourceMap 代码压缩后进行调bug定位将非常困难

原文链接: webpack4基础 webpack4基础 鉴于一些大牛的提醒，我把此文改成，基础的webpack，提供给像我一样的刚进入webpack的小白们。 首先webpack4建议使用 node版本在8.5以上 ，cmd中 node -v 查看node版本。 1.什么是webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。 代码转换 ：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。 文件优化 ：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。 代码分割 ：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。 模块合并 ：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。 自动刷新 ：监听本地源代码的变化，自动重新构建、刷新浏览器。 代码校验 ：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。 自动发布 ：更新完代码后，自动构建出线上发布代码并传输给发布系统。 构建其实是工程化

前言 — 在 web 开发场景，减少代码体积虽然是性能优化的一个方向，还没到锱铢必较的程度。但是在小程序场景，由于代码包上传阶段限制了主包 2M 和总包 16M（近期微信官方正在内测将总包上限调整至 20M ）的尺寸，超过就会面临无法发版的风险，代码包体积的优化就变得特别重要了。京喜小程序首页作为微信购物的大入口，承载大量流量，功能复杂模块众多，又要与其他核心业务和公共组件共享 2M 的主包空间，因此代码包瘦身的工作在持续不断进行，否则无法满足业务的快速增长。本文将结合以往优化策略与最近一次的瘦身实践，分享小程序代码瘦身的经验与思考。 常见的瘦身方式 — 京喜首页项目是一个优化良好的项目，对于常见的优化措施，已经有过很好的实践，就让我们我们先回顾一下有哪些常见的优化策略吧： 代码分包：将相对独立的页面和组件拆分到分包，可以解决主包体积受限问题； 依赖分析：移除未引用的页面、组件和其他文件； 避免使用本地资源：除了兜底图片，其他都尽可能使用 url 的方式，由于 base64 图本质上是将信息编码成长字符串，也会占用很多空间，不建议使用； 对所有类型的文件都进行压缩并清理注释，包括了：js、wxml、wxss、json； 此外，京喜首页团队还针对 Taro 开发场景进行了如下优化： 分析出编译后每个文件的高频重复代码（如处理兼容性的 pollyfill 代码），拆分生成公共文件

TypeScript是JavaScript的一个超集，支持ECMAScript 6标准。 1. tsc命令 我们可以使用tsx命令来执行TypeScript的相关代码，通常使用.ts作为TypeScript代码文件的扩展名。 tsc 常用编译参数 序号 编译参数说明 1. --help 显示帮助信息 2. --module 载入扩展模块 3. --target 设置 ECMA 版本 4. --declaration 额外生成一个 .d.ts 扩展名的文件。 tsc ts - hw . ts -- declaration 以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。 5. --removeComments 删除文件的注释 6. --out 编译多个文件并合并到一个输出的文件 7. --sourcemap 生成一个 sourcemap (.map) 文件。 sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。 8. --module noImplicitAny 在表达式和声明上有隐含的 any 类型时报错 9. --watch 在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。 2.TypeScript基础类型 Any类型：任意值是TypeScript针对变成时类型不明确的变量使用的一种数据类型。 null：“什么都没有”

练手项目完结打包的时候遇到一些问题，特此记录 先贴我的vue.config.js文件的代码（vue-cli3构建的项目默认是没有此文件的，需手动添加）更多详细配置参考官方配置文档，我的项目不大不小，这些配置貌似就够了 module.exports = { // webpack配置，此处是因为我的项目打包时报错（WARNING in asset size limit: The following asset(s) exceed the recommended size limit ，因此有了这个webpack配置，若不存在静态资源过大，可不要这部分代码） configureWebpack: { // 警告 webpack 的性能提示 performance: { hints: 'warning' , // 入口起点的最大体积 maxEntrypointSize: 50000000 , // 生成文件的最大体积 maxAssetSize: 30000000 , // 只给出 js 文件的性能提示 assetFilter: function (assetFilename) { return assetFilename.endsWith('.js' ); } } }, baseUrl: './' , // 1.默认为 "/":部署在一个域名的根路径上 ; 2. "./"

UglifyJS是JavaScript解析器，缩小器，压缩器和美化器工具箱。 由于webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin），其命令 webpack -p 即表示调用UglifyJS来压缩代码，还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS。 与UglifyJS2相比API变动较大，简化较多，文档也增加了不少示例。 由于webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin），其命令 webpack -p 即表示调用UglifyJS来压缩代码，还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS。因此我们其实经常要用到它，但UglifyJS本身配置较复杂/选项繁多，又没有中文文档，使用起来如坠云雾。鉴于此特翻译此文，谬误甚多，敬请斧正。 词典： parse 解释 compress 压缩 mangle 混淆 beautify 美化 minify 最小化 CLI 命令行工具 sourcemap 编译后代码对源码的映射，用于网页调试 AST 抽象语法树 name 名字，包括变量名、函数名、属性名 toplevel 顶层作用域 unreachable 不可达代码

loader承担的是翻译官的职责，利用其弥补了让webpack只能理解JavaScript和JSON文件的问题，从而可以处理其它类型的文件，所以loader对webpack的重要性不言而喻，所以学习构建一个loader是学习webpack的必经之路。在学习编写一个loader之前，要明确一下loader的职责： 其职责是单一的，只需要完成一种转换 。下面将逐步阐述选择loader开发中的几个关键点并实现一个loader。 一、Loader分类 loader是一个CommonJs风格的函数，接收输入的source后可通过同步或异步的方式进行处理，然后将内容进行输出。 1.1 同步Loader 同步loader指的是同步的返回转换后的内容。由于是在Node.js这样的单线程环境，所以转换过程会阻塞整个构建，构建缓慢，不适用于耗时较长的环境中。对于同步loader，主要有两种方法返回转换后的内容：return和this.callback. return 利用return可直接返回转换后结果。 module.exports = function ( source , map, meta){ // ... // output为处理后结果 return output； } this.callback 该方法相比于return更加灵活，其参数主要有四个： this.callback( err:

一、基本语法 1.1、声明变量的六种方法 参看地址： http://es6.ruanyifeng.com/#docs/let let：局部变量，块级作用域，声明前使用报错 var：全局变量，声明前使用 undefined const： 声明一个只读的常量。一旦声明，常量的值就不能改变。只是内存地址不变，如果是对象，内存不变属性对应的值可变 function： import： class： 1.2、变量解构赋值 参看地址： http://es6.ruanyifeng.com/#docs/destructuring 1.2.1、数组 let [foo, [[bar], baz]] = [1, [[2], 3 ]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz" ]; third // "baz" let [x, , y] = [1, 2, 3 ]; x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4 ]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a' ]; x // "a" y // undefined z // [] let [foo] = []; // foo undefined let