Source-map

前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成： Vue 代码层面的优化； webpack 配置层面的优化； 基础的 Web 技术层面的优化。 一、代码层面的优化 1.1、v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是 惰性的 ：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show 就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。 所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。 1.2、computed 和 watch 区分使用场景 computed： 是计算属性

搭建node服务（三）：使用TypeScript JavaScript 是一门动态弱类型语言，对变量的类型非常宽容。JavaScript使用灵活，开发速度快，但是由于类型思维的缺失，一点小的修改都有可能导致意想不到的错误，使用TypeScript可以很好的解决这种问题。TypeScript是JavaScript的一个超集，扩展了 JavaScript 的语法，增加了静态类型、类、模块、接口和类型注解等功能，可以编译成纯JavaScript。本文将介绍如何在node服务中使用TypeScript。 一、 安装依赖 npm install typescript --save npm install ts-node --save npm install nodemon --save 或者 yarn add typescript yarn add ts-node yarn add nodemon 另外，还需要安装依赖模块的类型库： npm install @types/koa --save npm install @types/koa-router --save … 或者 yarn add @types/koa yarn add @types/koa-router … 二、 tsconfig.json 当使用tsc命令进行编译时，如果未指定ts文件

webpack的入门实践 我会将所有的读者概括为初学者，即使你可能有基础，学习本节之前我希望你具有一定的JavaScript和node基础 文中的 ... ... 代表省略掉部分代码，和上面的代码相同 文中的文件夹如果没有说创建，并且项目默认没有的是需要你手动增加的 不会特别细致，但是足够入门 资源 视频教程 我的个人博客 什么是webpack Web浏览器使用HTML，CSS和JavaScript。随着项目的发展，跟踪和配置所有这些文件变得非常复杂,解决这个问题就需要一个新的工具 类似 webpack 的工具还有 Grunt 和 Gulp ， webpack 是模块管理工具，把你的项目按照你的想法进行划分模块打包，举个最简单的例子，这个页面需要加载一个 a.js 和 b.js ，但是你只想加载一个js文件，就可以使用 webpack 将两个文件进行合并，当然 webpack 的功能不止于此，代码转化、项目优化、代码分割、代码预编译、自动构建、自动刷新... 再比如你想你的代码兼容其他老的浏览器，你的css代码兼容不同的浏览器内核，或者你想自动精简掉你写了但是没有用到的代码，这些都可以使用webpack实现 如果你是 vue 或者 react 等框架的使用者，肯定使用过 vue-cli 或 react-create-app 这类脚手架工具，那么实现这个效果，就要学习 webpack

接着 从0开始搭建vue+webpack脚手架（一） 三、配置webpack-dev-server 　　1. webpack-dev-server自带一个node的服务器， 项目在服务端运行的同时可以实现热更新加载 　　2. 安装兼容环境变量的包 cross-env 　　（1）原因： 构建项目时分生产环境和开发环境，此时webpack需要配置production和development模式，需要使用一个变量来作条件判断，而不同的平台上设置环境变量方式不同，在Mac平台是 NODE_ENV=production 而windows平台上是set NODE_ENV=production,，所以需要使用cross-env 　　（2）安装 1 $ npm i -D cross-env 　　（3）将package.json运行脚本改为如下： 1 "scripts" : { 2 "test": "echo \"Error: no test specified\" && exit 1" , 3 "build": "cross-env NODE_ENV=production webpack --progress --colors" , 4 "dev": "cross-env NODE_ENV=development webpack-dev-server --colors --modules -

前言：在现实项目中，我们可能很少需要从头开始去配置一个webpack 项目，特别是webpack4.0发布以后，零配置启动一个项目成为一种标配。正因为零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化，所以实际应用中，我们可以把精力更多专注在业务层面上，而无需分心于项目构建上的优化。然而从学习者的角度，我们需要了解webpack在项目的构建和打包压缩过程中做了哪些的优化，以及在原有默认配置上，还可以做哪些性能方面上的改进。 最近在完成vue的单页面应用后萌生了一个想法，抛弃掉vue-cli的构建配置，从零开始进行webpack优化，并将过程中的思路和体会分享在这篇文章中。webpack的初始配置在我之前写的另一篇 手把手教你从零认识webpack4.0 文章中，以下内容也不对基本的webpack配置做过多阐述。 一，优化的方向 1.1 项目开发 对开发者而言，我们希望webpack这个工具可以给我们带来流畅的开发体验。比如，当不断修改代码时，我们希望代码的变更能及时的通知浏览器刷新页面，而不是手动去刷新页面。更进一步的我们希望，代码的修改只会局部更换某个模块，而不是整个页面的刷新。这样可以使我们不需要在等待刷新中浪费很多时间，大大提高了页面的开发效率。 1.2 项目部署 项目部署上线时，性能优化是我们考虑的重点，有两个方向可以作为核心考虑的点

依赖 项目基础配置使用 vue-cli 生成（可参考上一篇随笔） 移动端自适应方案核心：阿里可伸缩布局方案 - lib-flexible px 转 rem： px2rem ，它有 webpack 的 loader： px2rem-loader 开始 首先，我们使用 vue 的脚手架 vue-cli 来初始化一个 webpack 项目 没有安装过 vue-cli 的请先安装 vue-cli 安装所需依赖后安装 lib-flexible 和 px2rem-loader 1.下载lib-flexible npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.安装px2rem-loader npm install px2rem-loader 4.配置px2rem-loader 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如： const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } }

vue-cli3推崇零配置，其图形化项目管理也很高大上。 但是vue-cli3推崇零配置的话，导致了跟之前vue-cli2的配置方式都不一样了。 别名设置，sourcemap控制，输入文件位置和输出文件位置和输出的方式，压缩js控制，打包webapck日志分析，externals忽略配置（外部引入），调试的端口配置，proxy接口配置等等的。 有时候还需要我们配置的，因为官方推荐的，并不适用于我们平时的开发所用的。 所以，我的vue.config.js配置是下面这样的。还有一个改hash的配置，暂时还不知道如何配置，以后会解决的，解决的时候顺便更新这里。 资料查询借鉴地址： https://github.com/staven630/vue-cli3-config （介绍vue.config.js配置方法） https://github.com/loveRandy/vue-cli3.0-vueadmin （借鉴前辈vue-cli3项目里的vue.config.js配置）也查询了不少github上的相关项目。 下面这个vue.config.js需要先安装依赖 yarn add compression-webpack-plugin yarn add uglifyjs-webpack-plugin const IS_PROD = ['production', 'prod' ]

上篇文章介绍了如何搭建 react cesium 开发环境。在开发环境下，项目一切运行正常。最近把项目打包发布出来，却遇见了 cesium 不能正确初始化。打开浏览器的调试面板，出现好多 404，资源路径错误。下面是项目的资源处理过程整理，其中 cesium 需要独立处理，大家以后要注意。 一、react 静态资源处理 修改 config/paths.js function getServedPath(appPackageJson) { ... const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "./" ); ... } 二、cesium 资源处理 这个是重点，如果不处理，项目构建后会无法正常运行，cesium 资源会报 404 错误。主要思路是，在加载 cesium 之前设置 cesium 资源的 baseUrl，调用 cesium 自带的 buildModuleUrl 函数来设置 baseUrl。 修改 /src/index.js，增加如下代码 ... import buildModuleUrl from "cesium/Core/buildModuleUrl" ; buildModuleUrl.setBaseUrl( "./" ); ... 三、关闭 cesium

（1）初始化项目 新建一个文件夹“client-side”，作为项目根目录，进入这个文件夹： 我们先使用 npm 初始化这个项目： 这时我们看到了在根目录下已经创建了一个 package.json 文件，接下来我们创建几个文件夹： npm install -g tslint mkdir client-side cd client-side # 使用npm默认package.json配置 npm init -y # 或者使用交互式自行配置，遇到选项如果直接敲回车即使用括号内的值 npm init package name: (client-side) # 可敲回车即使用client-side这个名字，也可输入其他项目名 version: (1.0.0) # 版本号，默认1.0.0 description: # 项目描述，默认为空 entry point: (index.js) # 入口文件，我们这里改为./src/index.ts test command: # 测试指令，默认为空 git repository: # git仓库地址，默认为空 keywords: # 项目关键词，多个关键词用逗号隔开，我们这里写typescript,client,lison author: # 项目作者，这里写lison<lison16new@163.com> license: (ISC) #

VS Code默认缩进为2两个空格，修改为4个空格的方法。 一、首选项->设置，设置"editor.detectIndentation": false 二、ctrl+shift+x 打开插件下载页面，搜索beautify插件下载 三、在用户配置中，配置beautify（用户配置打开方式见步骤一） { "beautify.language": { "js": { "type": [ "javascript", "json" ], "filename": [ ".jshintrc", ".jsbeautify" ] }, "css": [ "css", "scss", "less" ], "html": [ "htm", "html", "vue" ] }, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "less.lint.validProperties": [ "\"compress\": false", "\"sourceMap\": false" ], "less.compile": { "compress": false, "sourceMap": false, "out": true, "outExt": ".css", }, "git