crm-vue项目上线前对加载速度以及兼容IE的一些方法

一、关于IE浏览器适配

打包前我们可以在package.json文件做如下配置

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],

如果你想指定兼容IE某个版本可以这么写："ie 11"

配置说明：

> 1% // 全球超过1%人使用的浏览器
> 5% in US // 指定国家使用率覆盖
last 2 versions // 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox ESR // 火狐最新版本
Firefox > 20 // 指定浏览器的版本范围
not ie <=8 // 方向排除部分版本
Firefox 12.1 // 指定浏览器的兼容到指定版本
unreleased versions // 所有浏览器的beta测试版本
unreleased Chrome versions // 指定浏览器的测试版本

二、提升加载速度的方法

对路由的处理：

    // 把通常的引入方法，换成异步引入
    import wechat from '../pages/login/wechat.vue'
    import pdfView from '../pages/pdf-view.vue'

    // 1.懒加载通常写法（打包后）
    let pdfView = (resolve) => {
        return require.ensure([], () => {
            console.log('pdfView')
            resolve(require('../pages/pdf-view.vue'))
        }, 'pdfView')
    }
    // require中，'pdfView'参数是打包后组件的名字
    // require.ensure()语法参见：https://www.html.cn/doc/webpack2/guides/code-splitting-require/

    // 2.懒加载新写法
    let wechat = () => import(/* webpackChunkName: "wechat" */'../pages/login/wechat.vue')
    // 多行注释可忽略，主要是为了给打包后组件自定义命名
    // 是通过注释语法来提供chunk name，但是webpack的版本要高于2.4的版本。

    routes: [{
            path: '/pdf',
            component: pdfView,
            meta: {
                navWebTitle: '电子合同',
                parentTitle: '产品详情',
                toParentTitle: 'goBack',
                noWebNav: true,
                navTitle: '电子合同'
            }
        },
        {
            path: '/wechat',
            component: wechat
        },
    ]

对vue组件，动态加载

    // vue组件按需加载
    // 组件里面：
    export default {
        components: {
            aview: function (resolve) {
                require(["./a.vue"], resolve);
            },
            bview: function (resolve) {
                require(["./b.vue"], resolve);
            }
        },
        data: function () {
            return {
                current: "",
                myData: "",
                show: false
            }
        },
        methods: {
            changeComponents: function (view) {
                if (view == 'aview') {
                    this.myData = 'a1000';
                } else {
                    this.myData = 'b1000';
                }
                this.current = view;
            }
        }
    }
    //  模板里面：
    `<component: is = "current": data = "myData"></component>`

对head内prefectch标签处理：

工程预渲染时生成的prefetch标签，在新版本浏览器里中自动加载网站所需所有资源；
我们删除懒加载模块的prefetch，降低带宽压力，按需加载：
我的工程是vue2，在vue.config.js里添加配置：

if (process.env.NODE_ENV === 'production') { // 生产环境
    config.plugins.delete('prefetch');
}

这里是官方指南：
https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload

--------------------- 更新于20190422 @ziChin --