1%","last2versions","notie<=8"],如果你想指定兼容ie某个版本可以这么写:"ie11"配置说明:>5%//全球使用情况统计选择" />
爱游戏全站app官网入口-爱游戏官网

crm-爱游戏全站app官网入口

2023-08-17,,

打包前我们可以在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;
}
}
}
// 模板里面:
``

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

crm-vue项目前对加载速度以及兼容ie的一些方法的相关教程结束。

网站地图