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

一、关于IE浏览器适配

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

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

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

配置说明：

> 5% // 全球使用情况统计选择的浏览器版本。 >=，<也<=工作。
> 5% in US // 使用美国使用情况统计。它接受两个字母的国家/地区代码。
> 5% in alt-AS // 使用亚洲地区使用情况统计。可在以下位置找到所有地区代码的列表caniuse-lite/data/regions。
> 5% in my stats // 使用自定义使用数据。
cover 99.5% // 提供覆盖的最流行的浏览器。
cover 99.5% in US // 与上述相同，使用双字母国家代码。
cover 99.5% in my stats // 使用自定义使用数据。
maintained node versions // 所有Node.js版本，仍由 Node.js Foundation 维护。
node 10和node 10.4 // 选择最新的Node.js 10.x.x 或10.4.x发布。
current node // Browserslist目前使用的Node.js版本。
extends browserslist-config-mycompany // 从browserslist-config-mycompanynpm包中获取查询 。
ie 6-8 // 选择包含范围的版本。
Firefox > 20 // Firefox的版本比20更新 >=，<并且也可以<=工作。
iOS 7 // iOS浏览器版本7直接。
Firefox ESR // 最新的[Firefox ESR]版本。
unreleased versions或unreleased Chrome versions // alpha和beta版本。
last 2 major versions或last 2 iOS major versions // 最近2个主要版本的所有次要/补丁版本。
since 2015或last 2 years // 自2015年以来发布的所有版本（也since 2015-03和since 2015-03-10）。
dead // 来自last 2 version查询的浏览器，但全球使用统计数据少于0.5％，且24个月内没有官方支持或更新。现在是IE 10，IE_Mob 10，BlackBerry 10， BlackBerry 7，和OperaMobile 12.1。
last 2 versions // 每个浏览器的最后两个版本。
last 2 Chrome versions // Chrome浏览器的最后两个版本。
defaults // Browserslist的默认浏览器（> 0.5%, last 2 versions, Firefox ESR, not dead）。
not ie <= 8 // 排除先前查询选择的浏览器。

npx browserslist 在项目目录中运行以查看选择了哪些浏览器。

 npx browserslist

也可以通过 browserl.ist 网站查看选择了哪些浏览器。

https://browserl.ist/

二、提升加载速度的方法

对路由的处理：

    // 把通常的引入方法，换成异步引入
    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 --