Webpack

browserHistory是使用React Router的应用推荐的history，它使用浏览器重的History API用于处理URl 可以通过设置webpack.config.js 中的devServer，设置如下 devServer: { historyApiFallback: { index: 'src/index.html' }, } 实际开发用browserHistory而不用hashHostory（可以直接用，不用在服务器配置）： browserHistory 其实使用的是 HTML5 的 History API ，浏览器提供相应的接口来修改浏览器的历史记录；而 hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录； History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法，所以并没有替换历史记录的功能。但 react-router 通过 polyfill 实现了此功能，具体实现没有看，好像是使用 sessionStorage。 另一个原因是 hash 部分并不会被浏览器发送到服务端，也就是说不管是请求 http://domain.com/index.html#foo 还是 http://domain.com/index.html#bar

起因 前公司商城App项目使用的是H5开发，有微信公众号、Ios和Android三个版本，H5版本是自己写的一套框架，已经用了有些年头了，承载不下不断涌现出的新需求。而Ios和Android端通过webview加载h5文件显示，App的原生功能和H5交互的代码写得有些凌乱，在我接手项目后老板完全没给重构的时间，所以只能在做新功能的时候顺手一点点的重构。后来要做一个与原先的商城相对独立的新商城，而且新商城的入口放在老商城中。因为时间紧任务重，使用React Native或者weex的话需要将原项目重构后再引入，考虑到可能存在的各种各样的坑，不太可能使用这些解决方案。使用vue或者react构建一个web项目再嵌入原有的app项目中是最稳妥的。最终因为vue的名字在字符数和音节数量上占了绝对的优势而入选。 vue项目构建 预备 vue中文文档: https://cn.vuejs.org/v2/guide/instance.html 构建工具环境 nodejs: http://nodejs.cn 构建工具vue-cli: https://github.com/vuejs/vue-cli 如果是第一次接触vue或者在已有项目中引入vue时可以选择用CDN版本或者下载js文件 vue的生产版本js： https://vuejs.org/js/vue.min.js 引入CDN版本：

（1）生命周期不同 小程序：onLoad():页面加载，一个页面只会调用一次，可以获取参数 　　　　onShow()页面显示 　　　　onReady() 首次显示页面，会触发onReady()方法，渲染页面元素和样式，一个页面只会调用一次。 　　　　onHide() 当小程序后台运行或者跳转到其他页面，触发onHide() 　　　　onUnload()页面卸载 VUE： 　　　　beforeCreate、created（创建）、beforeMount、mounted（挂载）、beforeUpdate、updated（更新）、beforeDestory、destoryed（销毁） （2）数据绑定 vue：动态绑定一个变量的值为某个属性时，会在前面加上冒号 <img :src= "imgSrc" /> 小程序：绑定某个变量的值为元素属性时，会用两个大括号括起来 <image src= "{{imgSrc}}" ></image> （3）列表渲染 vue: <ul> 　　<li v-for="(item,index) in list"> 　　　　{{index}}---{{item.name}} 　　</li> </ul> 小程序： <view wx:for="{{arrList}}" wx:key="*five"> <view id="{{index}}"> 　　　　<view>{

答案： 1、Vue 应用运行时性能优化措施 （1）引入生产环境的 Vue 文件 （2）使用单文件组件预编译模板 （3）提取组件的 CSS 到单独到文件 （4）利用Object.freeze()提升性能 （5）扁平化 Store 数据结构 （6）合理使用持久化 Store 数据 （7）组件懒加载 2、Vue 应用加载性能优化措施 （1）服务端渲染 / 预渲染 （2）组件懒加载 得益于 Vue 的 响应式系统 和 虚拟 DOM 系统 ，Vue 在渲染组件的过程中能自动追踪数据的依赖，并精确知晓数据更新的时候哪个组件需要重新渲染，渲染之后也会经过虚拟 DOM diff 之后才会真正更新到 DOM 上，Vue 应用的开发者 一般不需要 做额外的优化工作。 但在实践中仍然有可能遇到性能问题，下面会介绍一些定位分析 Vue 应用性能问题的方式及一些优化的建议。 整体内容由三部分组成： 1、如何定位 Vue 应用性能问题 2、Vue 应用运行时性能优化建议 3、Vue 应用加载性能优化建议 1. 如何定位 Vue 应用性能问题 Vue 应用的性能问题可以分为两个部分，第一部分是运行时性能问题，第二部分是加载性能问题。 和其他 web 应用一样，定位 Vue 应用性能问题最好的工具是 Chrome Devtool，通过 Performance 工具可以用来录制一段时间的 CPU 占用、内存占用

一、webpack层面优化 CDN加载方式替换import方式 原理： 浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器连接，而大部分服务器的带宽有限，如果超过限制，网页就半天反应不过来。而 CDN 可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加，且CDN 具有更好的可用性，更低的网络延迟和丢包率 。 操作： // 文件：./src/index.html <script src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> 图片base64转码 目的

npm install报如下错误： npm ERR! code ELIFECYCLE npm ERR ! errno 1 npm ERR ! bhwechat@ 1.0 . 0 dev: `webpack-dev-server --inline --progress --config build/ webpack.dev.conf.js` npm ERR ! Exit status 1 npm ERR ! npm ERR ! Failed at the bhwechat@ 1.0 . 0 dev script. npm ERR ! This is probably not a problem with npm. There is likely additional logging output above. npm ERR ! A complete log of this run can be found in : npm ERR ! C:\Users\Kelly\AppData\Roaming\npm-cache\_logs\ 2019 - 03 -24T08_17_24_284Z-debug.log 解决方案1（实践成功）： 1、删除node_modules包 2、清除缓存：npm cache clean --force 3、重新安装：npm install 解决方法2（未实践

本文链接： https://blog.csdn.net/antma/article/details/86104068 本机环境：Windows 10 专业版 x64 1、下载安装包 Node.js 官方网站下载： https://nodejs.org/en/ 选择操作系统对应的包： 下载完成，安装包如下： 2、安装 打开安装，傻瓜式下一步即可： 选择安装位置，我这里装在D盘下： 安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号： 3、配置npm在安装全局模块时的路径和缓存cache的路径 因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，如下图所示： 所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令： npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program

前言 在 第二小节 中，我们讨论了利用TypeScript创建Web项目的实现，在本下节，我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目。 准备 Webpack配置在第二小节项目的基础上做了一些修改， 添加React相关依赖：react、react-dom、@types/react 和@types/react-dom 修改Webpack配置文件 修改webpack.base.config.js，其余文件和第二小节保持一致，修改如下： const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: { 'app': './src/index.tsx' }, output: { filename: '[name].[chunkhash:8].js' }, resolve: { extensions: ['.js', '.ts', '.tsx'] }, module: { rules: [ { test: /\.tsx?$/i, use: [{ loader: 'ts-loader' }], exclude: /node_modules/ } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src

注：本篇不是入门教程，入门请直接查看官方文档。本篇的主要目标是通过实际问题来介绍 webpack 中容易被人忽略的细节, 以及源码分析( 以最新发布的 release 版本1.14.0的源码为例 ), 并且提供几种解决方案。 随着前端技术的火热发展，工程化，模块化和组件化的思想已逐步成为主流，与之相应的，就需要有一整套工具流可以支撑起它。 现在比较热门的前端资源模块化管理和打包工具应该非 Webpack 莫属了。 Webpack 是什么 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。 —引自 Webpack 中文指南 使用举例 我们来看一下官方文档中的最小用例，新建并写入以下内容到这两个文件： cats.js var cats = [ 'dave' , 'henry' , 'martha' ]; module .exports = cats; app.js (Entry Point) cats = require ( './cats.js' ); console .log(cats); 这个时候，就可以使用