一、关于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

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

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;            }        }    }    //  模板里面：    `
     
      `
     

 

对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 --