随

 配个人密钥：

      命令：

      ssh-keygen -t rsa -C ""

      cat ~/.ssh/id_rsa.pub

npm config get registry 查看当前源

npm config setregistryhttps://registry.npm.taobao.org切换淘宝源

如果安装途中遇到ejs的报错，需要在node-modules —>

ejs-compiled-loader —> package.json —> dependencies 下，将GitHub的地址改

husky@0.15.0-rc.13

Node_sass设置内网下载地址

npm config set sass_binary_site 地址

npm config set sass_binary_site null

npm i node-sass@4.9.3 --verbose

有状态的对象: mixin

高阶函数: render-props

跨组件的逻辑复用: hooks 

function-based API

在多个组件中清晰的复用逻辑

grid search

Object.defineProperty

Const obj = {};

Let realValue = 123;

onFooChanged(()=> {

Console.log(obj,foo);

}); —> 订阅者

Let currentEffect;

Function onFooChanged((effect)=> {

currentEffect = effect;

Effect();

currentEffect = null;

});

Const subs = [];

Object.defineProperty(obj, ‘foo’,{

Enumerable: false;

Configurable: false;

get(){

// trackDependency();

if (currentEffect){

fooSubs.push(currentEffect);}

Return realValue},

set(newValue){

realValue = newValue;

// notifyChange();

Subs.forEach(effect = >

effect());},

);

Const proxy = new Proxy(obj,{

get() {};

set() {};

deleteProperty() {};

has() {};

});

Render machism

Template

Complied into render function

returns Visual dom

Actual dom

Render function

Returns new visual Dom

Diffed against old virtual Dom Domupdates

Applied to actual Dom

Actual dom

[obj,HTMLDivElement];

expensive browser native object

Visual dom (创建对象，再遍历）

[tag:

div,data: {attracts: {},…},children: []];

Cheep javascript object

vdom 最大瓶颈： 垃圾回收

Function render(){}

性能

web性能

根据URL缓存

304 没有更新，只有请求头，速度快

app webview优化思路

提前初始化webview

客户端代理数据请求

js异步加载async/defer

将全局变量存储在局部变量中：因为全局变量总是存在于执行环境作用域链的最末端

尽量避免使用with，try-catch，eval等动态作用域语法，因为javascript引擎无法通过静态分析的方法进行优化

使用对象字面量代替对象

使用h5

web workers 来允许多线程工作

新特性beacon，不堵塞队列的异步数据发送

For in 循环性能最差

forEach比数组循环慢

当判断多余2个时，使用switch，否则用if-else

在JavaScript中，switch使用全等操作符

把最可能出现的条件放在首位

把递归算法该用迭代算法实现

缓存：避免重复性工作，手动实现缓存

dom操作相关优化

批量修改dom时，使用document fragment

事件委托进行时间绑定

使用原生选择器API： querySeletorAll()和querySeletor()

减少访问dom的次数，把运算尽量在js层面作处理，譬如virtualDOM

使用children代替childNodes

用element.cloneNode()代替document.createElement(),稍快一点

避免不必要重绘重排

css优化

能用css3实现的不要用图片

避免通配符，删除多余修饰语

避免使用后代选择其，特别是那些制定多余祖先的，css嵌套不宜超过4层

使用class选择其代替后代选择器

选择器解析是从右向左的，因此避免使用标签选择器，特别是div，否则会先查找该页面所有的div，是十分消耗性能的

打包慢的原因

业务模块多

多个第三方依赖包

依赖包内容太多

webpack版本低

UglifyJS单线程打包

HappyPack,多个任务

ParalleUglifyPlugin

New ParalleUglifyPlugin({

         UglifyJS:{},

         Test:/.js&/g,

         Include:[],

         Exclude:[],

         cacheDir:’’,

         worderCount:‘’, 进程数

sourceMap: false,

}) 分发的作用，执行的是UglifyJS

cacheDirectory

用noParse跳过文件解析

用resolve减短搜索目录和路径

用fast-sass-loader，fast-css-loader

webpack.base.conf.js

```js

'use strict'

// 使用happypack

const HappyPack = require('happypack');

const os = require('os');

const path = require('path')

const utils = require('./utils')

const config = require('../config')

const vueLoaderConfig = require('./vue-loader.conf')

const webpack = require('webpack')

const vuxLoader = require('vux-loader')

const happyThreadPool = HappyPack.ThreadPool({

  size: os.cpus().length,

});

function resolve (dir) {

  return path.join(__dirname, '..', dir)

}

const createLintingRule = () => ({

  test: /\.(js|vue)$/,

  loader: 'eslint-loader',

  enforce: 'pre',

  include: [resolve('src'), resolve('test')],

  options: {

    formatter: require('eslint-friendly-formatter'),

    emitWarning: !config.dev.showEslintErrorsInOverlay

  }

})

var webpackConfig = {

  context: path.resolve(__dirname, '../'),

  entry: utils.getEntries('./src/module', 'main.js'),

  output: {

    path: config.build.assetsRoot,

    filename: '[name].js',

    publicPath: process.env.NODE_ENV === 'production'

      ? config.build.assetsPublicPath

      : config.dev.assetsPublicPath

  },

  resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      vue$: 'vue/dist/vue.esm.js',

      '@': resolve('src'),

      src: path.resolve(__dirname, '../src'),

      assets: path.resolve(__dirname, '../src/assets'),

      config: path.resolve(__dirname, '../src/config'),

      api: path.resolve(__dirname, '../src/api'),

      components: path.resolve(__dirname, '../src/components'),

      views: path.resolve(__dirname, '../src/views'),

      store: path.resolve(__dirname, '../src/store'),

      module: path.resolve(__dirname, '../src/module'),

      lib: path.resolve(__dirname, '../src/lib'),

      util: path.resolve(__dirname, '../src/util'),

      service: path.resolve(__dirname, '../src/service'),

    },

  },

  module: {

    rules: [

      ...(config.dev.useEslint ? [createLintingRule()] : []),

      {

        test: /\.vue$/,

        loader: 'vue-loader',

        options: vueLoaderConfig

      },

      {

        test: /\.js$/,

        loader: 'babel-loader?cacheDirectory=true',

        include: [resolve('src'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/neo/src')],

      },

      {

        test: /\.json$/,

        loader: 'json-loader',

      },

      {

        test: /\.ejs$/,

        loader: 'ejs-compiled-loader',

        include: [resolve('src'), resolve('test')],

        exclude: /node_modules/

      },

      {

        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

        use: [

          {

            loader: 'url-loader',

            options: {

              limit: 10000,

              name: utils.assetsPath('img/[name].[hash:7].[ext]')

            }

          }

        ]

      },

      {

        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          limit: 10000,

          name: utils.assetsPath('media/[name].[hash:7].[ext]')

        }

      },

      {

        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          limit: 10000,

          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

        }

      }

    ]

  },

  node: {

    // prevent webpack from injecting useless setImmediate polyfill because Vue

    // source contains it (although only uses it if it's native).

    setImmediate: false,

    // prevent webpack from injecting mocks to Node native modules

    // that does not make sense for the client

    dgram: 'empty',

    fs: 'empty',

    net: 'empty',

    tls: 'empty',

    child_process: 'empty'

  },

  plugins:[

    new webpack.DllReferencePlugin({

      context: __dirname,

      manifest: require(`../${config.dll.path}/libs-mainfest.json`) // 指向生成的manifest.json

    }),

    new HappyPack({

      // 用id来标识 happypack处理类文件

      id: 'happyBabel',

      // 如何处理 用法和loader 的配置一样

      loaders: ['babel-loader?cacheDirectory=true'],

      // loaders: ['babel-loader'],

      // 共享进程池

      threadPool: happyThreadPool,

      // 允许 HappyPack 输出日志

      verbose: true,

    }),

  ]

}

module.exports = vuxLoader.merge(webpackConfig, {

  plugins: [

    {

      name: 'vux-ui'

    },

    {

      name: 'duplicate-style'

    }

  ]

});

// module.exports = vuxLoader.merge(webpackConfig, {

//  plugins: ['vux-ui', 'duplicate-style']

// })

```