babel

(给 前端食堂 加星标，吃好每一顿) 引言 webpack 的打包优化一直是个老生常谈的话题，常规的无非就分块、拆包、压缩等。 本文以我自己的经验向大家分享如何通过一些分析工具、插件以及 webpack 新版本中的一些新特性来显著提升 webpack 的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。 本文演示代码，仓库地址:https://github.com/Jack-cool/webpack4(欢迎star啊 ) 速度分析 🏂 webpack 有时候打包很慢，而我们在项目中可能用了很多的 plugin 和 loader ，想知道到底是哪个环节慢，下面这个插件可以计算 plugin 和 loader 的耗时。 yarn add -D speed-measure-webpack-plugin 配置也很简单，把 webpack 配置对象包裹起来即可： const SpeedMeasurePlugin = require ( "speed-measure-webpack-plugin" ); const smp = new SpeedMeasurePlugin(); const webpackConfig = smp.wrap({ plugins : [ new MyPlugin(), new MyOtherPlugin() ] }); 来看下在项目中引入 speed

初级分析：使用webpack内置的stats stats:构建统计信息 package.json中使用stats "scripts": { "build:stats":"webpack --env production --json > stats.json" } 复制代码 指定输出的json对象，输出一个json文件 Node.js 中使用 const webpack = require('webpack') const config = require('./webpack.config.js')('production') webacpk(config, (err, stats) => { if(err) { return console.error(err); } if(stats.hasErrors()) { return console.log(stats.toString("errors-only")) } console.log(stats); }) 复制代码 缺点：颗粒度太粗，看不出问题所在。 速度分析：使用speed-measure-webpack-plugin const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin') const smp = new

cnpm i webpck@4 webpack-cli -D cnpm i webpack-cli -D cnpm update npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. 删除 // "extract-text-webpack-plugin": "^3.0.2", cnpm install mini-css-extract-plugin -D //^0.8.0 升级 webpack-dev-server "webpack-dev-server": "^3.8.2" rm -rf node_modules rm package-lock.json npm cache clear --force npm install Error: webpack.optimize.CommonsChunkPlugin has

上一次将webpack1升级到3，也仅是 半年前 ，前端工具发展变化太快了，如今webpack4已经灰常稳定，传说性能提升非常高，值得升级。 一直用着的webpack3越来越慢，一分多钟的编译时间简直不能忍，升级之后在几个系统和几台电脑上评测，平均提高了7-9倍，生产模式的最突出 升级之后完整的 webpack4项目配置DEMO 已经放到Github中，欢迎围观 star ~ 关于如何升级到V4已经有很多优秀的文章，结合官方文档你也可以升级起来 本文仅说说本次升级主要做的改动优化点，或者坑 webpack4升级完全指南 webpack4 changelog React 16 加载优化性能 1. 移除了commonchunk插件，改用了optimization属性进行更加灵活的配置 ，不过稍微不注意，就会有问题，如 Uncaught Error: only one instance of babel-polyfill is allowed 如果一个页面存在多个entry入口文件，即页面引用了多个模块时，默认会产生多个独立的common区 所以记得将common设为公有，如 optimization: { runtimeChunk: { name: 'common' }, 2. 默认的生产模式noEmitOnError为true，导致代码检查工具报错之后无法将检查结果写入文件中

翻译自 Malcolm Laing 原文： https://medium.com/frontend-digest/whats-the-difference-between-nextjs-and-create-react-app-11b55650a612 应该为你的应用选择哪个工具呢？ 在 2021 年创建新的React项目时，有两个明确的选择： NextJS 或 Create-React-App 。 Gatsby 已经失宠了。 由于大规模构建缓慢， NextJS 成为更好的静态站点生成器。 让我们回顾一下 NextJS 和 Create-React-App 的优缺点，我们还将介绍哪些用例和场景更适合其中一个。 Create-React-App Create-React-App是一个脚手架，它使我们能够为我们创建一个新的React应用程序。它将 webpack 和 babel 封装在一起，组成一个新的脚本工具 react-scripts 来管理整个应用，这样会减少很多复杂式，还有学习成本。 这意味着更新那些 “隐藏的” 依赖关系是一件容易的事。等待新版本的react脚本，然后进行更新。无需随意修复webpack配置的重大更改。 使用Create-React-App的优势 比较自由 欢迎您使用任何您喜欢的库，没有规则或建议，您可以使用任何您喜欢的路由库。 在客户端 render （渲染

文：徐超，《React进阶之路》作者 授权发布，转载请注明作者及出处 ###React 深入系列5：事件处理 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 Web应用中，事件处理是重要的一环，事件处理将用户的操作行为转换为相应的逻辑执行或界面更新。在React中，处理事件响应的方式有多种，本文将详细介绍每一种处理方式的用法、使用场景和优缺点。 使用匿名函数 先上代码： //代码1 class MyComponent extends React.Component { render() { return ( <button onClick={()=>{console.log('button clicked');}}> Click </button> ); } } 点击Button的事件响应函数是一个匿名函数，这应该是最常见的处理事件响应的方式了。这种方式的好处是，简单直接。哪里需要处理事件响应，就在哪里定义一个匿名函数处理。代码1中的匿名函数使用的是箭头函数，我们也可以不使用箭头函数： //代码2 class MyComponent extends React.Component { render() { return ( <button onClick={function()

index.js是整个项目的入口文件。 // 1. Initialize const app = dva({ history: createHistory(), }); // 2. Plugins app.use(createLoading()); // 3. Register global model app.model(require('./models/global').default); // 4. Router app.router(require('./router').default); // 5. Start app.start('#root'); export default app._store; // eslint-disable-line 找到/src/common/menu.js中进行菜单配置， 在/src/common/router.js的routerConfig中配置路由，其中第一个参数是一个DvaInstance的实例，是index.js文件中定义的；第二个参数是该页面对应的model，即数据存储的地方；第三个参数是一个函数，返回对应的页面。 '/': { component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')), },

1.Unable to load script from assets 'index.android.bundle'. curl -k "http://localhost:8081/index.android.bundle" > android/app/src/main/assets/index.android.bundle 2.error: bundling failed: Error: Unable to resolve module 'AccessibilityInfo' from 降级处理 react-native init AwesomeProject cd AwesomeProject react-native run-android npm uninstall react-native npm install --save react-native@0.55.4 react-native run-android npm install --save babel-core@latest babel-loader@latest npm uninstall --save-dev babel-preset-react-native npm install --save-dev babel-preset-react-native@4.0.0 react-native run

目录 1，NodeJS 2，Vue CLI 3，Vue UI 4，后台接口反向代理 5，vue-devtool s 1，NodeJS 访问 nodejs.org 下载。这是必不可缺的环境之一。 下载最新的 LTS 版本。LTS 代表长期维护，通常比较稳定。 2，Vue CLI vue-cli 是从头搭建 vue 工程的脚手架工具，通过该工具，可以简化工程环境的配置。vue-cli 的官网地址为： cli.vuejs.org/zh/ 。 使用命令安装： npm install -g @vue/cli # OR yarn global add @vue/cli 安装后检查版本： vue -V 最新版本在 3 以上： 3.3.0 安装 VUE CLI 之后，就可以使用create指令创建项目了： vue create hello-world 除了命令行创建，还可以使用 VUE UI 创建。 如上所示，在创建过程中，涉及到这些工程特性： Babel，必选，用于将编写的ES6代码编译成浏览器能识别的JavaScript代码，是核心组件包 Typescript，微软开发的JS的强类型版本，通过Babel能够编译成JavaScript，可选 PWA，Progressive web apps，渐进式Web 应用，一般不选 Router，路由组件，用于页面跳转，多页面程序必选，单页面不选 Vuex

感谢支持ayqy个人订阅号，每周义务推送1篇（ only unique one ）原创精品博文，话题包括但不限于前端、Node、Android、数学（WebGL）、语文（课外书读后感）、英语（文档翻译） 如果觉得弱水三千，一瓢太少，可以去 http://blog.ayqy.net 看个痛快 一.放弃webpack的原因 1.webpack模块可读性太低 // 引用模块 var _myModule1 = __webpack_require__(0); var _myModule2 = __webpack_require__(10); var _myModule3 = __webpack_require__(24); // 模块定义 /* 10 */ /***/function (module, exports, __webpack_require__) {...} // 源码 _myModule2.default.xxx() 这种代码读起来相当费劲，先找到 _myModule2 对应的 __webpack_require__ id，再找对应的模块定义，最后看该模块 exports 身上挂了什么东西。模块定义这个部分很讨厌，延长了阅读引用链 当然，一般不需要读bundle，这一点并不致命 2.文件很大 如上面提到的，这些额外的bundle代码（子模块定义、子模块引用等等