vue组件

常常会使用到vue封装的各种组件 今天就推荐下

• NProgress 浏览器顶部加载进度条

   //base
   // npm i nprogress -S
  import NProgress from 'nprogress' // progress
  import 'nprogress/nprogress.css';// Progress 进度条 样式
  import router from './router/'
  
  Vue.use(ElementUI)
  Vue.use(router);
  router.beforeEach((to, from, next) => {
    NProgress.start(); 
    next();
  });
  
  router.afterEach(() => {
    NProgress.done(); // 结束Progress
  });

favicon webpack中的配置

const resolve = require('path').resolve;

// webpack.config.js
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest'],
            minChunks: 3,
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            // 关键代码
            favicon: resolve('./src/favicon.ico')
        })
    ],

// vue源码
var isIOS = UA && /iphone|ipad|ipod|ios/.test(UA);
var isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;

tree-shaking 尽量使用 import * as XX from 'js_modules' 来引入模块 配合webpack2.0 的tree-shaking 能实现代码有效体积减少

1）用import/export来改造代码，这是tree-shaking的基础，ES6的模块支持继承，可以正确执行tree-shaking。

2）webpack的打包非压缩的情况下会保留unused function，压缩版才会真正去掉。

3）尽量使用import * as uu from './invoke.js'隐式语法而无须使用import {ddd} from './invoke.js'这种显式语法。

4）我们的业务接入tree-shaking特性后，代码体积有减少30%。

作者：码匠之心
链接：http://www.jianshu.com/p/7bd8d5e87965
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

// .babelrc
参考bable

// .babelrc的配置推荐使用babel-preset-env，这是目前最新的解决方案，会非常灵活的通过参数指定来兼容当前的环境。    
{
  "presets": [
    ["env", {
      "target": {
        "browsers": ["ios > 7", "android >= 4"]
      },
      "modules": false
    }]
  ]
}

赏

谢谢支持我,技术交流请加微信

微信