Webpack

课程大纲： https://miaov.com/index.php/news/newsDetail/nid/263 原文件 Npm 基本使用 切换镜像, 国内的网络访问 npm 服务器可能比较慢, 切换到国内的镜像会更快 安装卸载, 使用 npm 快速安装和卸载项目依赖, 同时也可以把项目依赖声明在 package.json 文件里 运行命令, 在 package.json 的 script 字段里面, 你可以声明一些和项目相关的自定义命令, 这样可以快速对项目进行一些相应的操作 webpack 模块打包器, 除了分析 js 模块依赖, 配合相应的 loader 还可以对你的资源依赖进行分析和打包 loader 相关, 在引入模块前, loader 会先预处理一下模块的内容 babel-loader 处理 js 模块, 配合不同的 babel 插件可以编译不同内容 css, style-loader 引入 css, 如果你要引入 css, 应该先让 css-loader 介入处理 file-loader 加载资源文件, css-loader 会帮你引入一些图片或者你会在 js 里面引入一些资源依赖, 这个时候需要你把这些路径和资源交给 file-loader 处理. plugin 相关, 插件会做一些 loader 做不来的事情, 它可能会在构建的不同时间点起作用 html

WebPack 1作用 将涉及到的 js，css,png,jpg 等进行整理，整理成一个assets，加快浏览器加载。 2下载 cnpm install -g webpack@1.13.2 3 运行 webpack 4 打包 webpack a b ：将a文件打包成b 文件 来源： oschina 链接： https://my.oschina.net/u/4895689/blog/4899398

引子 ： 一个指标引发的血案 https://www.cnblogs.com/Sherlock09/p/11726885.html 性能优化 进入移动互联网时代，传统Web开发技术（HTML，CSS，JavaScript）风光不再，客户端技术（iOS以及Android）依靠良好的体验重新崛起。但是客户端技术的开发效率始终无法与Web技术抗衡，同时会受到诸多平台层面的限制。在这一大背景下，小程序独特的架构诞生了，它将Web前端技术与传统的客户端技术结合在一起，其目的是在开发效率上超过传统的客户端技术，在使用体验上超越传统的Web前端技术。由于小程序的架构区别于传统的Web前端技术，开发者在开发过程可能会遇到一些性能上的问题。本文旨在介绍百度小程序一些实现原理和优化手段，帮助开发者优化自己的小程序。 一 小程序运行时简介 在传统的Web前端项目中，所有代码全部运行在浏览器中。而小程序提供的运行环境有两种，分为逻辑层和视图层。假设现在开发者的小程序项目中有两个页面 pages/index和pages/home ，那么逻辑层代码指的是 app.js 与 pages/index/index.js 还有 pages/home/home.js ，视图层代码指的是 pages/index/index.swan 和 pages/home/home.swan

前戏 在之前我们使用webpack进行打包的时候，webpack.config.js配置都是我们自己手写的。而Vue-CLI是官方提供的，用来搭建项目脚手架的工具，它是vue.js开发的标准工具，它已经集成了webpack，内置好了很多常用配置，使得我们在使用vue开发项目时更加的标准化。 官方文档：https://cli.vuejs.org/zh/ 安装 Vue-CLI需要node.js 8.9以上的版本 全局安装 Vue-CLI npm install -g @vue/cli 安装成功后，在命令行可以使用 vue 命令，比如查看当前安装的版本： vue -- version # 或者 大写V vue -V 如果执行上面后，命令行提示 'vue' 不是内部或外部命令 解决方法：配置环境变量 1. 查看全局安装目录 nmp root -g 2. 在 我的电脑 进入全局安装目录下，找到 vue.cmd 3. 右键计算机，属性—》高级系统设置—》环境变量，将 vue.cmd 所在的路径加入环境变量，点击“确定” 使用Vue-CLI创建项目 运行 vue create 命令来创建一个新项目，在哪个目录下执行就会生成在哪个目录下 vue create 项目名称 执行后会让你选择，第一个是默认项目，第二个是自定义项目 创建默认项目 会提示选择默认（ default ）还是手动（

介绍 　　本文将详细介绍前端性能优化的七大手段，包括减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化 雪碧图 减少请求数量 【合并】 　　如果不进行文件合并，有如下3个隐患 　　1、文件与文件之间有插入的上行请求，增加了N-1个网络延迟 　　2、受丢包问题影响更严重 　　3、经过代理服务器时可能会被断开 　　但是，文件合并本身也有自己的问题 　　1、首屏渲染问题 　　2、缓存失效问题 　　所以，对于文件合并，有如下改进建议 　　1、公共库合并 　　2、不同页面单独合并 【图片处理】 　　1、雪碧图 　　CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图片、SVG图片的流行，该技术渐渐退出了历史舞台 　　2、Base64 　　将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33% 　　3、使用字体图标来代替图片 【减少重定向】 　　尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验 　　如果一定要使用重定向

Vue CLI3--运行单个 *.vue 文件 1. 安装全局扩展 npm install -g @vue/cli-service-global 2. 运行.vue文件 vue serve 文件夹名 注意: 如果已经安装过可以直接运行 vue serve 文件夹 运行时, 会自动生成一个 node_modules 文件夹 Vue官方api JSON.parse(JSON.stringify(row)) JSON.parse('要转换的数据') JSON.stringify('要转化的数据') 俩个方法的用法差别: ①.JSON.stringify是从一个对象中解析出字符串 ②.JSON.parse是从一个字符串中解析出json(键值对) 主要用来解决: 　　俩个地方同时调用一个数据 (v-model) 产生的变化 ( 相当于深拷贝 ) 数据可视化 D3.js 想要修改vue项目自动开启浏览器 在config下的 index.js里的 module.exprots里的 dev项 修改 module.exports = { dev: { host: 'localhost', // 可以被process.env.HOST覆盖 port: 3000, // 配置端口号 默认8080 autoOpenBrowser: true, // 是否自动打开浏览器 errorOverlay: true

https://zhihu.com/people/zhan-zi-zhen-84 下面我谈一下我认为的 react hooks 的优缺点，优缺点通过和传统的 React.Component 进行对比得出。 优点 一、更容易复用代码 这点应该是 react hooks 最大的优点，它通过自定义 hooks 来复用状态，从而解决了类组件有些时候难以复用逻辑的问题。 hooks 是怎么解决这个复用的问题呢，具体如下： 每调用 useHook 一次都会生成一份独立的状态，这个没有什么黑魔法，函数每次调用都会开辟一份独立的内存空间。虽然状态( from useState )和副作用( useEffect )的存在依赖于组件，但它们可以在组件外部进行定义。这点是 class component 做不到的，你无法在外部声明 state 和副作用（如 componentDidMount ）。上面这两点，高阶组件和renderProps也同样能做到。但hooks实现起来的代码量更少，以及更直观（代码可读性）。 举个例子，我们经常使用的 antd-table ，我们经常需要写一些状态： pagination={current:xxx，pageSize:xxx,total:xxx} 。但许多场景只是简单的表格，我们希望封装一个高阶组件，自带这些状态，并可以自动调用 server 去获取 remote

前言 vue-cli 都到 3.0.3 了，所以是时候玩转一下 vue-cli 3 的新特性了。 1. vue-cli 3.0.3 以下的安装都是在 macOS 的环境下进行的，当然在 windows 和 linus 下也同理。 1.1 安装 vue cli 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 可以使用下列任一命令安装这个新 vue-cli 3.0.3 的包： npm install -g @vue/cli # OR yarn global add @vue/cli 你还可以用这个命令来检查其版本是否正确 (3.x)： vue --version 或者： vue -V 1.2使用图形化界面 你也可以通过 vue ui 命令以图形化界面创建和管理项目： vue ui 上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。 1.3 创建项目 1.3.1 默认型 新建文件夹，在该文件夹下打开命令窗口，输入以下命令进行新建项目，当然我起的项目名字叫 vue-webpack-demo vue create vue-webpack-demo 会让你选择默认

CommonJS 规范主要解决服务端中 library 的导入导出问题。 NodeJS（同时也包括 webpack 与 npm）是CommonJS规范的实现 由于 CommonJS 规范引入依赖的方式是同步的，而在浏览器端需要进行异步加载，因此创建了 AMD 规范用于浏览器端管理依赖问题。 require.js 是AMD 规范的一管实现。 UMD 是AMD和CommonJS的糅合。UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。 在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。 来源： oschina 链接： https://my.oschina.net/lemos/blog/4890763